For a few days I've been trying to get the socket.io chat example to work from here. First I tried it by typing everything myself. But it didnt work. After that I tried it with the files from github.
the part
After I got the files from github I tried it did not work I have run
npm install
and it downloaded the dependencies into the node_modules folder, I also ran
npm install --save express#4.10.2
npm install --save socket.io
I got no errors on any of the commands.
I start the program with
node index.js
Which gives me the following message:
listening on *:30000
If I go to localhost:3000, I get the chat application as in the example. But no messages show up when posting the form.
However, when I use the following code to check connection:
io.on('connection', function(socket){
console.log('user connected');
});
it works, so the problem is in emitting data.
Also, the following code works:
server index.js
io.on('connection', function(socket){
var tweet = {user: "nodesource", text: "Hello, world!"};
// to make things interesting, have it send every second
var interval = setInterval(function () {
socket.emit("tweet", tweet);
console.log("tweeting");
}, 1000);
socket.on("disconnect", function () {
clearInterval(interval);
});
});
Client
socket.on("tweet", function(tweet) {
// todo: add the tweet as a DOM node
console.log("tweet from", tweet.username);
console.log("contents:", tweet.text);
});
So emitting and receiving from the server to the client works.
What I've tried
Run in different browsers
Run on different PC's
Copy from github
Type everything myself
Check the console in Chrome for errors (no errors found)
Change ports
Different paths (used c:\chat , d:\chat, c:\personalfiles\chat )
Disable firewall
What works
When following the tutorial, the part where a user connects and gets logged on the console work.
I get the chat page
Console says its listening
No errors
Any tips on how to solve this, or how to find what's wrong?
My 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="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
$('form').submit(function(){
console.log('Send message');
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
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.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
try this (for version <= 0.8):
io.configure(function () {
io.set("transports", ["xhr-polling"]);
io.set("polling duration", 10);
});
for version 1.0.x it would be something like:
var io = require('socket.io').listen(http, {
"transports": ['websocket',
'flashsocket',
'htmlfile',
'xhr-polling',
'jsonp-polling',
'polling'],
"polling duration": 10
});
Yours:
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
Are you sure it's not supposed to be this instead?
io.sockets.on('connection', function (socket) {
socket.on('chat message', function(msg){
io.sockets.emit('chat message', msg);
});
});
Related
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 new in node.js and socket.io. I didn't understand how to work with rooms. I'm creating something like a Private Messages. Each pair of users have their unique room.
From documentation:
io.on('connection', function(socket){
socket.join('some room');
});
But I need to create a room from client side. Because it's dynamic. How?
I met some examples https://gist.github.com/crtr0/2896891
server.js
io = socketio.listen(server);
io.sockets.on('connection', function(socket) {
socket.on('room', function(room) {
socket.join(room);
});
});
room = "abc123";
io.sockets.in(room).emit('message', 'what is going on, party people?');
This line drives me crazy. It seems to me stupid. Because server never know which room to use. Server just can handle multiple rooms.
room = "abc123";
Please, help or explain.
In you above code you have fixed room to abc123 , that you need to make it dynamic for all connected clients . You can provide room create option to user also you can provide logic to change/rename/leave/join room from client. Basically in your client and server you can apply below logical changes.
Client logic to update or change room :
socket.emit('switchRoom', newRoom);
socket.on('updaterooms', function(rooms, current_room) {
// Update new room logic
}
Server Logic to handle room change :
socket.on('switchRoom', function(newroom){
// leave the current room (stored in session)
socket.leave(socket.room);
// join new room, received as function parameter
socket.join(newroom);
socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
// sent message to OLD room
socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
// update socket session room title
socket.room = newroom;
socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
socket.emit('updaterooms', rooms, newroom);
});
Refer Below Example :
Socket.io Multi-room Example
Rooms and Namespace in socket.io
Okay, I solved my problem! If you use rooms within namespaces, don't forget write .of('your_namespace')
I created my own way of creating rooms from client side dynamically and it worked.
You can found video tutorial on youtube. https://www.youtube.com/watch?v=q5OKKudZTeY&list=PLZdwvOOinjFbzhZutEK9HvC56nicFXSpZ&index=8&t=0s
I used EJS for rendering.
Index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
const path = require('path');
const roomsList = [];
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get('/', (req, res) => {
//res.sendFile(__dirname + '/index.html');
res.render(path.join(__dirname,'/','index.html'),{rooms: roomsList});
});
app.get('/room/', (req, res) => {
var name = req.query.name;
res.render(path.join(__dirname,'/','rooms.html'),{rooms: name});
});
app.get('/addRoom/', (req, res) => {
var name = req.query.name;
roomsList.push(name);
console.log(JSON.stringify(roomList));
res.send(200);
});
const adminNameSpace = io.of('/admin');
adminNameSpace.on('connect', (socket) => {
//console.log('a user connected');
socket.on('join', (data)=>{
socket.join(data.room);
adminNameSpace.in(data.room).emit('chat message', `New Person joined the ${data.room} room `);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (data) => {
console.log('message: ' + data.msg);
adminNameSpace.in(data.room).emit('chat message', data.msg);
});
socket.on('send msg to all', (data) => {
console.log('message: ' + data.msg);
adminNameSpace.emit('chat message', data.msg);
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
index.html
<html>
<head>
</head>
<body>
<p>Select your room!</p>
<p>Create Rooms</p>
<input id='input-room-name' />
<button onclick="createRoom()">Create Room</button><br/>
<script>
const rooms = '<%= rooms %>';
const roomList = rooms.split(',');
function createRoom()
{
var name = document.getElementById('input-room-name').value;
document.body.innerHTML+= `${name}<br /><br />`;
httpGet(name);
}
function httpGet(name)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", `/addRoom?name=${name}`,false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
for (const name of roomList)
{
if(name!='')
document.body.innerHTML += `${name}<br /><br />`;
}
</script>
</body>
</html>
rooms.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<h1><%= rooms %></h1>
<button onclick="sendMSGToAll()">Send Message to all</button>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('/admin');
var form = document.getElementById('form');
var input = document.getElementById('input');
const room = '<%= rooms %>';
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', {msg: input.value, room});
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('connect', () => {
socket.emit('join', {room: room});
})
function sendMSGToAll()
{
socket.emit('send msg to all', {msg: input.value, room});
}
</script>
</body>
</html>
Below is my server side code where I want to display if user is connected or disconnected.But the user is connected and user is disconnected message is appearing twice. Can somebody help me why is it appearing twice?
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.sendfile('index.html');
});
io.on('connect', function(socket) {
socket.broadcast.emit('chat message', 'a user connected!');
socket.on('disconnect', function() {
socket.broadcast.emit('chat message', 'user disconnected');
});
socket.on('chat message', function(msg) {
socket.broadcast.emit('chat message', msg);
});
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
Client Code
<!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>
var socket = io();
</script>
<script src="/socket.io/socket.io.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>
<script>
var typing = false;
var timeout = undefined;
function timeoutFunction(){
typing = false;
socket.emit(noLongerTypingMessage);
}
function onKeyDownNotEnter(){
if(typing == false) {
typing = true
socket.emit(typingMessage);
timeout = setTimeout(timeoutFunction, 3000);
} else {
clearTimeout(timeout);
timeout = setTimeout(timeoutFunction, 3000);
}
}
</script>
</body>
</html>
You have two copies of this in your client file:
script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Remove one of them.
Correct your order
io.on('connect', function(socket) {
socket.broadcast.emit('chat message', 'a user connected!');
socket.on('chat message', function(msg) {
socket.broadcast.emit('chat message', msg);
});
socket.on('disconnect', function() {
socket.broadcast.emit('chat message', 'user disconnected');
});
});
I'm following the Socket.IO tutorial, but I am running into an issue where the number of messages that display on the page increase exponentially, making the chat client ineffective.
Some cursory searching is telling me that it involves event handlers, but I haven't found anything definitive on how to use them in this context. What and where do I need to use these event handlers, and why?
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.on('connection', function(socket){
// console.log('a user connected');
// socket.on('disconnect', function(){
// console.log('user disconnected');
// });
socket.on('chat message', function(msg){
//console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(8080, function(){
console.log('listening on *:8080');
});
And my 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>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function doDid(){
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>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button onclick="doDid()">Send</button>
</form>
</body>
</html>
The problem is that you subscribe to the "chat message" event each time you press your button.
You should only run this code once:
var socket = io();
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
So you should change your code like this:
<script>
var socket = io();
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
function doDid(){
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
};
</script>
var socket = io();
This line creates a connection to socket.io. Each time you call it you are creating another connection. Try only calling that once instead of on each send.
To clarify, the io() function is a factory not an accessor.
Edit:
Looks like the socket.io client actually does cache sockets it creates and doesn't create multiple connections.
However, I also noticed you are binding events in that function, but are calling it each click, so you are rebinding each time. Call your function only once at startup.
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.