I am following along with a tutorial which demonstrates how to set up a very simple chat app with nodejs (express) and WebSockets. I can confirm that the connection between client and server is established but cannot figure out why the 'chat' event does not get processed by the server on the other side. I am using Socket.io 2.04 and my server is running out of Cloud9. I am just trying to get a working example set up so I have the CSS, HTML, and script in the same file for the webpage. Any idea what I am doing wrong? I've spent enough hours fiddling with this that I could really use some expert advice...
// server side code
var express =require("express");
var app = express();
var socket = require('socket.io');
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(express.static(__dirname + "/public"));
app.get("/websockets", function(req, res) {
res.render("websockets.ejs");
});
var server = app.listen(process.env.PORT, process.env.IP, function(){
console.log("SERVER IS RUNNING!");
});
// Socket setup
var io = socket(server);
io.on('connection', function(socket){
console.log('made socket connection', socket.id);
// Handle chat event
socket.on('chat', function(data){
console.log(data);
io.sockets.emit('chat', data);
});
});
and below is the page sent to the client
<html>
<head>
<meta charset="utf-8">
<title>WebSockets 101</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<style>
body{
font-family: 'Nunito';
}
h2{
font-size: 18px;
padding: 10px 20px;
color: #575ed8;
}
#mario-chat{
max-width: 600px;
margin: 30px auto;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0,0,0,0.05);
border-radius: 2px;
}
#chat-window{
height: 400px;
overflow: auto;
background: #f9f9f9;
}
#output p{
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#feedback p{
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong{
color: #575ed8;
}
label{
box-sizing: border-box;
display: block;
padding: 10px 20px;
}
input{
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-family: Nunito;
font-size: 16px;
}
button{
background: #575ed8;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="mario-chat">
<div id="chat-window">
<div id="output"></div>
</div>
<input id="handle" type="text" placeholder="Handle"/>
<input id="message" type="text" placeholder="Message"/>
<button id="send">Send</button>
</div>
<script>
// Make connection
var socket = io.connect('https://mywebsitename:8080');
// Query DOM
var message = document.getElementById('message'),
handle = document.getElementById('handle'),
btn = document.getElementById('send'),
output = document.getElementById('output');
// Emit events
btn.addEventListener('click', function(){
socket.emit('chat', {
message: message.value,
handle: handle.value
});
message.value = "";
console.log("It should have sent out a chat event...");
});
// Listen for events
socket.on('chat', function(data){
output.innerHTML += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});
</script>
</body>
</html>
Related
This is piece of code for small chat.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
and html page:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
on console window I see received messages from client but what i want to achieve is when i open http://localhost:3000/msgmonitor i would like to see all this messages that are comming from clients. How to do this?
Here is the full code :-
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chatIN', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chatOUT', function(msg){
$('#messages').append('<li><span>'+msg+'</span></li>');
});
});
</script>
</body>
</html>
And here is my index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket){
socket.on('chatIN', function(msg){
console.log('message:'+ msg);
socket.emit('chatOUT:'+ msg);
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
I am facing a problem while trying out a socket.io beginner's tutorial, I followed this tutorial
https://socket.io/get-started/chat/
Everything seems to be okay till the very last thing, when they build a chat app, and when you hit submit in textbox, it updates the contents of the element.
I can see the messages getting printed in the node js console, but nothing in chrome's console. I also tried debugging it using developer options, but the control just never goes in this method in the index.html.
socket.on('chat message', function(msg){
Can someone please help ? I am really new to socket.io and nodejs.
Thanks
You are sending the wrong message from the server.
On the server, change this:
socket.emit('chatOUT:'+ msg);
to this:
socket.emit('chatOUT', msg);
Your client code is listening for the chatOUT message so that's the exact message name need to send. Here's the matching client code:
socket.on('chatOUT', function(msg){...}
I'm trying to follow the official socket.io tutorial but I can't get the server to receive messages. I've spent a few hours trying all sorts of things. I'm completely out of ideas.
Here's the server:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function (socket) {
//socket.emit('greeting', 'welcome to the chat');
socket.on('chat', function (msg) {
console.log('message: ' + msg);
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});
and the client:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: .5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
//localStorage.debug = '*';
var socket = io("http://localhost:3000/");
socket.on('greeting',
function (msg)
{
console.log(msg);
}
);
/*
$('form').submit(function ()
{
socket.emit('chat message', $('#m').val());
//$('#m').val('');
return false;
});
*/
$("#sendBtn").click(function ()
{
socket.emit('chat', $('#m').val());
return false;
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button id="sendBtn">Send</button>
</form>
</body>
</html>
The client can receive messages from the server but the other way around doesn't work. I've tried turning on debugging but I can't tell if what I'm seeing is right or wrong. However, there certainly is an interaction happening when I press send on the webpage.
Here's how it looks from the client side:
You need to correct the bind to your element, and you are trying to bind to a component that isn't rendered yet. You need to wait for DOM to be ready. Try this.
$(function() {
$("#sendBtn").on('click', function ()
{
socket.emit('chat', $('#m').val());
return false;
});
});
Wrapping your function like this you are telling to execute only when the page is loaded
server:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var clients = [];
var sequence = 1;
io.on('connection', function(socket){
console.log('Client connected (id=' + socket.id + ').');
clients.push(socket);
socket.on('login', function(msg){
console.log(msg);
io.emit('login', msg);
});
socket.on('disconnect', function(){
var index = clients.indexOf(socket);
if (index != -1) {
clients.splice(index, 1);
console.info('Client gone (id=' + socket.id + ').');
}
});
});
http.listen(3011, function(){
console.log('listening on *:3011');
});
client:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io('http://localhost:3011');
$('form').submit(function(){
socket.emit('login', $('#m').val());
$('#m').val('');
return false;
});
socket.on('login', function(msg){
//alert(msg);
$('#messages').append($('<li>').text(msg));
});
socket.on('connect', function() {
console.log('connected');
});
socket.on('message', function(msg){
console.log(msg);
});
socket.on('disconnect', function() {
console.log('disconnected');
});
socket.on('error', function (e) {
console.log('System', e ? e : 'A unknown error occurred');
});
</script>
</body>
</html>
This work perfect on localhost.
server log:
listening on *:3011
Client connected (id=Kk-LUoJep5Uw0qWLAAAA).
message
Client gone (id=Kk-LUoJep5Uw0qWLAAAA).
But if i work with ec2 server. NodeJS and socket.io can't send message.
log ec2 server:
listening on *:3011
Client connected (id=1Phd18CNKLEnRH3LAAAA).
Client gone (id=1Phd18CNKLEnRH3LAAAA).
Port 3011 open.
he is get connect and disconnect event, but cant get or send message.
How to fix it? Thx.
I have two files, one named index.js and the other index.html.
When I press the send button the message doesn't appear
The code of the file index.js is the following:
app = require('express.io') ();
app.http().io();
app.get('/', function(req, res){
res.sendfile('index.html');
});
app.io.on('connection', function(socket){
socket.on('chat message',function(msg) {
app.io.emit('chat message' ,msg)
});
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
app.listen(3000);
The code of the file index.html is the following:
<!doctype html>
<html>
<head>
<title>Example of chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
write this instead
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(3000);
app.get('/', function (req, res) {
res.sendfile('index.html');
});
io.on('connection', function (socket) {
socket.on('chat message', function (data) {
socket.broadcast.emit('chat message',data);
});
});