I am creating a chess game website. I need to show online players available when a user clicks play online. From the online players list the user can click and send them req to play. Now my main problem is I'm new to socket.io and didn't find any resources regarding this online. I am not trying to show the users available in a single room rather the whole socket servers available players.
Here Online Players will be shown in a list
function sendName(name) {
var isNameValid = true;
for (var i = 0; i < users.length; i++) {
if (users[i].name === name) {
isNameValid = false;
console.log(name + " is already taken");
console.log(users);
socket.emit("nameError", "Name already exists, Try again");
return;
}
}
if (isNameValid) {
var room = generateRoomId();
users.push({ id: socket.id, name: name, room: room });
socket.join(room);
socket.emit("roomId", room);
}
}
All the users are pushed in the users' array on the server-side. but I don't know how to get their name and room info on the client-side then show it in the front end.
<div>
<h3 style="color:white;">Online Players</h3>
<ul id="users">
</ul>
</div>
Online players will be shown here.
Also when one user disconnects the online players' list should refresh which I think socket can do. I am doing a project and any help will be much appreciated and I will learn from it too.
I am adding an example code for server and client side. The full working code is available here. Each client will retrieve all the active rooms from the socket.io server after successful connections and join a room called "ChessRoom"
Server Side
const sockets = new Map() // holds all active sockets
io.on('connection', (socket) => {
console.log(`${socket.id}: connected`);
sockets.set(socket.id,socket) // add socket to Map object
socket.join("ChessRoom") // join socket to demo room
socket.on('disconnect', (data)=>{
console.log(`${socket.id} disconnected`);
sockets.delete(socket.id) // delete socket from Map object
})
socket.on('getrooms', (data,replyFn)=>{
console.log(`${socket.id}: received getrooms event with ${data}`);
const rooms = Array.from(io.sockets.adapter.rooms).map( (room) => {
return { name: room[0], members: Array.from(room[1])}
})
replyFn(rooms)
})
});
Client Side
socket.on('connect', async ()=>{
console.log(`${socket.id} connected`)
const data = "OptionalData"
socket.emit( "getrooms", data, (rooms) =>{
rooms.forEach((room, index) => {
console.log(`room${index}: `, room)
});
})
})
socket.on('error', async ()=>{
console.log(`${socket.id} error`)
})
Related
In my project, I've a user, that user can in two channels , but i want this user can receive notifications for two channels different.
I can ask a question?
How to Client can join multiple room and receive 2 notifications the same time for different two rooms.
I have code here :
client.js
var socket = io.connect('localhost:3000');
socket.on('connect', function(){
socket.emit("subscribe",'test');
});
socket.on('message', function(message) {
console.log('Receive >>', message);
});
server.js
var client = redis.createClient();
io.sockets.on('connection', function (socket) {
var broadcast = function(channel, message){
socket.broadcast.to(channel).emit('message', message);
}
socket.on("subscribe",function(channel){
client.subscribe(channel);
socket.join(channel);
});
socket.on('disconnect', function() {
client.unsubscribe(channel);
client.removeListener(broadcast)
})
client.on("message", broadcast);
});
I wanna : socket.on("subscribe",function(channel){
client.subscribe(channel, channel1, channel2);
socket.join(channel, channel1, channel2);
});
But socket.io not support that.
Please give me an idea or a suggestion. Thanks so much!
I've the following code working in my server-side, it's all ok. But, I want to keep the same connection between n tabs, because when I open a new tab, looks like I've disconnected from the first tab... So, how can I keep the same connection?
client.js
socket.emit("connected", {user: inputUser.val()};
app.js
var express = require("express"),
app = express(),
http = require("http").Server(app),
io = require("socket.io")(http),
users = {};
io.on("connection", function(socket) {
socket.on("connected", function(data) {
socket.user = data.user;
users[socket.user] = socket;
updateUsers();
});
function updateUsers() {
io.emit("users", Object.keys(users));
}
socket.on("typing", function(data) {
var userMsg = data.user;
if(userMsg in users) {
users[userMsg].emit("typing", {user: socket.user});
}
});
socket.on("disconnect", function(data) {
if(!socket.user) {
return;
}
delete users[socket.user];
updateUsers();
});
});
var port = Number(process.env.PORT || 8000);
http.listen(port, function() {
console.log("Server running on 8000!");
});
Update:
The typing event above works fine... So I tried the typing event according to the answer:
var express = require("express"),
app = express(),
http = require("http").Server(app),
io = require("socket.io")(http),
users = {};
io.on("connection", function(socket) {
socket.on("connected", function(data) {
socket.user = data.user;
// add this socket to the Set of sockets for this user
if (!users[socket.user]) {
users[socket.user] = new Set();
}
users[socket.user].add(socket);
updateUsers();
});
function updateUsers() {
io.emit("users", Object.keys(users));
}
socket.on("typing", function(data) {
var userMsg = data.user;
if(userMsg in users) {
users[userMsg].emit("typing", {user: socket.user});
}
});
socket.on("disconnect", function(data) {
if(!socket.user) {
return;
}
// remove socket for this user
// and remove user if socket count hits zero
if (users[socket.user]) {
users[socket.user].delete(socket);
if (users[socket.user].size === 0) {
delete users[socket.user];
}
}
updateUsers();
});
});
var port = Number(process.env.PORT || 8000);
http.listen(port, function() {
console.log("Server running on 8000!");
});
But it is giving the following error:
users[userMsg].emit("typing", {user: socket.user});
^
TypeError: users[userMsg].emit is not a function
Update²:
To fix the typing event error, I just changed to:
socket.on("typing", function(data) {
var userMsg = data.user;
if(userMsg in users) {
for(let userSet of users[userMsg]) {
userSet.emit("typing", {user: socket.user});
}
}
});
There is no simple way to share a single socket.io connection among multiple tabs in the same browser. The usual model for multiple tabs would be that each tab just has its own socket.io connection.
The opening of a new tab and a new socket.io connection should not, on its own, cause your server to think anything was disconnected. If your code is doing that, then that is a fault in your code and it is probably easier to fix that particular fault.
In fact, if you want to explicitly support multiple tabs and be able to recognize that multiple tabs may all be used by the same user, then you may want to change your server side code so that it can keep track of multiple sockets for a single user, rather than how it is currently coded to only keep track of one socket per user.
If your server code is really just trying to keep track of which users online, then there's probably an easier way to do that by referencing counting each user. I will post a code example in a bit.
var express = require("express"),
app = express(),
http = require("http").Server(app),
io = require("socket.io")(http),
users = {};
io.on("connection", function(socket) {
socket.on("connected", function(data) {
socket.user = data.user;
// increment reference count for this user
if (!users[socket.user]) {
users[socket.user] = 0;
}
++users[socket.user];
updateUsers();
});
function updateUsers() {
io.emit("users", Object.keys(users));
}
socket.on("disconnect", function(data) {
if(!socket.user) {
return;
}
// decrement reference count for this user
// and remove user if reference count hits zero
if (users.hasOwnProperty(socket.user)) {
--users[socket.user];
if (users[socket.user] === 0) {
delete users[socket.user];
}
}
updateUsers();
});
});
var port = Number(process.env.PORT || 8000);
http.listen(port, function() {
console.log("Server running on 8000!");
});
If you need the users object to have the socket object in it, then you can change what is stored in the users object to be a Set of sockets like this:
var express = require("express"),
app = express(),
http = require("http").Server(app),
io = require("socket.io")(http),
users = {};
io.on("connection", function(socket) {
socket.on("connected", function(data) {
socket.user = data.user;
// add this socket to the Set of sockets for this user
if (!users[socket.user]) {
users[socket.user] = new Set();
}
users[socket.user].add(socket);
updateUsers();
});
function updateUsers() {
io.emit("users", Object.keys(users));
}
socket.on("disconnect", function(data) {
if(!socket.user) {
return;
}
// remove socket for this user
// and remove user if socket count hits zero
if (users[socket.user]) {
users[socket.user].delete(socket);
if (users[socket.user].size === 0) {
delete users[socket.user];
}
}
updateUsers();
});
});
var port = Number(process.env.PORT || 8000);
http.listen(port, function() {
console.log("Server running on 8000!");
});
For anyone still having this issue. here is how i fixed it.
let me explain.
once the page refreshes or a new tab is opened, socket dosen't really care so it opens a new connection every time . this is more of a advantage than disadvantage. the best way to tackle the issue is on the server side, once a user logs in with his or her user name , you can send that name along with the query options on the client so it can be used as a unique identifier. in my case i used a token
this.socket = io.connect(`${environment.domain}` , {
query: {token: this.authservice.authToken}
});
then on the server side you can create an empty array to a key and an array of values. the username of the user will be used as a key and the corresponding array of socket as the value. in my own case like i said i used a token
const users = [ ]
socket.nickname = (decoded token username);
users[socket.nickname] = [socket];
then you can perform a simple logic to check if a user already exists in an array, if it does, push the new socket to the array of the user
if ( user.username in users) {
console.log('already exists')
users[user.username].push(socket);
}
if it dosent, just create a new key and add the socket as the key.(make sure its an array because a user can always refresh or open a new tab with the same account and you dont want the chat message to deliver in one tab and not deliver in another)
else {
socket.nickname = username;
users[socket.nickname] = [socket];
}
then to emit a message you simply loop through the array and emit the message accordingly. this way each tab gets the message
socket.on('chat', (data) => {
if (data.to in users) {
for(let i = 0; i < users[data.to].length; i++) {
users[data.to][i].emit('chat', data)
}
for(let i = 0; i < users[data.user].length; i++) {
users[data.user][i].emit('chat', data)
}
}
})
you can add a disconnect logic to remove the socket from the users array too to save memory, so only currently open tabs acre active and closed tabs are removed. i hope it solved your problem
My solution is joining socket to a room with specific user Id.
io.on('connection', async (socket) => {
socket.join('user:' + socket.handshake.headers.uid) // The right way is getting `uid` from cookie/token and verifying user
})
One advantage is sending data to specific user (sending to all tabs)
io.to('user:' + uid).emit('hello');
Hope it's helpful!
I belive the best way is create a channel for the user and unique it by their ID, so, when you need to receive or send something you use the channel and every socket connected to it will receive.
Another solution is to save the flag to localStorage and use eventListener to change localStorage.
Do not connect when another connection exists.
and save message in local storage for send with master tab.
I need help how to push notification to specific user. I can now push notifcation but all user will get that notification. I can filter it on clinet side but I think it is unsecure...
First I send data with laravel 5:
$redis = Redis::connection();
$redis->publish('update.answer', json_encode($events));
here is my node.js i emite data:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var Redis = require('ioredis');
var redis = new Redis();
redis.subscribe('update.group', function(err, count) {
});
redis.subscribe('update.question', function(err, count) {
});
redis.subscribe('update.answer', function(err, count) {
});
redis.subscribe('update.comment', function(err, count) {
});
redis.on('message', function(channel, message) {
message = JSON.parse(message);
console.log(message);
io.emit(channel, message);
});
http.listen(3000, function(){
console.log('Listening on Port 3000');
});
and with angularjs I take data and push to the client.
socket.on('update.answer',function(data){
if($scope.remove){
$scope.remove = false;
}
$scope.feed = $("#feed").val();
if(parseInt($scope.feed) === parseInt(data.userID)){
$scope.answers.push(data);
$scope.$digest();
}
});
WIth this part:
$scope.feed = $("#feed").val();
if(parseInt($scope.feed) === parseInt(data.user_id) && data.admin_id !== null){
}
I check if client should get notification but it is unsecure...
Any way to improve this?
To push message to specific user , you must store his/her reference somewhere.
for ex
io.on('connection', function(socket) {
socket.on('add-user', function(data){
clients[data.username] = socket;
});
});
now to push message to specific user just use his username to retrive his socket
clients[data.username].emit(channel, message);
Update : Explanation
This Assume that each user who uses you web app is having some sort of authentication.
As soon as user login into your application , let him join on the nodejs backend socket.
on client side
socket.emit('add-user',userObj);
});
userObj is object that contains user details,you can send the username alone too
socket.emit('add-user',username);
in your nodejs first decalre one array that contains the socket of all the users who joins the website
var clients = [];
now in your nodejs application write this additional code
io.on('connection', function(socket) {
socket.on('add-user', function(data){
clients[data.username] = socket;
});
});
up to this moment the user who login into your website will call add-user event from client side which will in turn call add-user on nodejs and there socket will be added into the clients array
now to send message to any particular user you must know there username,so if you know the username of the user then you can simply emit message to them using
clients[data.username].emit(channel, message);
I'm trying to display a list of clients in a specific room. I just want to show their username, and not their socket id.
This where I'm at:
socket.set('nickname', "Earl");
socket.join('chatroom1');
console.log('User joined chat room 1);
var roster = io.sockets.clients('chatroom1');
for ( i in roster )
{
console.log('Username: ' + roster[i]);
}
Haven't had any luck getting it to list Socket IDs or anything. Would like it to return the nicknames however.
In socket.IO 3.x
New to version 3.x is that connected is renamed to sockets and is now an ES6 Map on namespaces. On rooms sockets is an ES6 Set of client ids.
//this is an ES6 Set of all client ids in the room
const clients = io.sockets.adapter.rooms.get('Room Name');
//to get the number of clients in this room
const numClients = clients ? clients.size : 0;
//to just emit the same event to all members of a room
io.to('Room Name').emit('new event', 'Updates');
for (const clientId of clients ) {
//this is the socket of each client in the room.
const clientSocket = io.sockets.sockets.get(clientId);
//you can do whatever you need with this
clientSocket.leave('Other Room')
}
In socket.IO 1.x through 2.x
Please refer the following answer:
Get list of all clients in specific room. Replicated below with some modifications:
const clients = io.sockets.adapter.rooms['Room Name'].sockets;
//to get the number of clients in this room
const numClients = clients ? Object.keys(clients).length : 0;
//to just emit the same event to all members of a room
io.to('Room Name').emit('new event', 'Updates');
for (const clientId in clients ) {
//this is the socket of each client in the room.
const clientSocket = io.sockets.connected[clientId];
//you can do whatever you need with this
clientSocket.leave('Other Room')
}
Instead of going deep in socket/io object , You can use simple and standard way :
io.in(room_name).clients((err , clients) => {
// clients will be array of socket ids , currently available in given room
});
For more detail DO READ
Just a few things.
when you have the socket you can then set the properties like: socket.nickname = 'Earl'; later to use the save property for example in a console log:
console.log(socket.nickname);
you where missing a closing quote (') in your:
console.log('User joined chat room 1);
Im not entirely sure about your loop.
Below is the amended code should help you out a bit, also be aware the loop i am using below is asynchronous and this may effect how you handle data transfers.
socket.nickname = 'Earl';
socket.join('chatroom1');
console.log('User joined chat room 1');
var roster = io.sockets.clients('chatroom1');
roster.forEach(function(client) {
console.log('Username: ' + client.nickname);
});
to help you out more i would need to see all your code as this does not give me context.
For v4 I used this method fetchSockets()
Example :
let roomUsers=await io.in(`room-id`).fetchSockets()
see documentation here :
https://socket.io/docs/v3/migrating-from-3-x-to-4-0/#Additional-utility-methods
All the answers above and the one here socket.io get rooms which socket is currently in or here Socket.IO - how do I get a list of connected sockets/clients? were either incorrect or incomplete if you use 2.0.
In 2.0, io.sockets.manager and io.sockets.clients don't exist anymore.
Without using namespace, the following 3 parameters can all get sockets in a specific room.
socket.adapter.rooms;
io.sockets.adapter.rooms;
io.sockets.adapter.sids; // the socket.id array
With namespace (I used "cs" here), io.sockets.adapter.rooms will give a quite confusing result and the result socket.adapter.rooms gives is correct:
/* socket.adapter.rooms give: */
{
"/cs#v561bgPlss6ELZIZAAAB": {
"sockets": {
"/cs#v561bgPlss6ELZIZAAAB": true
},
"length": 1
},
"a room xxx": {"sockets": {
"/cs#v561bgPlss6ELZIZAAAB": true
},
"length": 1
}
}
/* io.sockets.adapter.rooms give: a sid without namespace*/
{
"v561bgPlss6ELZIZAAAB": {
"sockets": {
"v561bgPlss6ELZIZAAAB": true
}, "length": 1
}
}
Note: the default room is this: "Each Socket in Socket.IO is identified by a random, unguessable, unique identifier Socket#id. For your convenience, each socket automatically joins a room identified by this id."
I only tried memory adapter so far, have not tried redis-adapter.
For socket.IO v3 there's a breaking change here:
Namespace.clients() is renamed to Namespace.allSockets() and now returns a Promise.
BEFORE:
// all sockets in the "chat" namespace and in the "general" room
io.of("/chat").in("general").clients((error, clients) => {
console.log(clients); // => [Anw2LatarvGVVXEIAAAD]
});
Now (v3):
// all sockets in the "chat" namespace and in the "general" room
const ids = await io.of("/chat").in("general").allSockets();
Source
In case you're not so familiar with socket.IO, it might be good to know that instead of io.of("/chat") you can write io to use the default namespace.
For Socket v.4 correct syntax would be:
const sockets = await io.in("room1").fetchSockets();
https://socket.io/docs/v4/server-api/#namespacefetchsockets
socket.io ^ 2.0
function getRoomClients(room) {
return new Promise((resolve, reject) => {
io.of('/').in(room).clients((error, clients) => {
resolve(clients);
});
});
}
...
const clients = await getRoomClients('hello-world');
console.log(clients);
Output
[ '9L47TWua75nkL_0qAAAA',
'tVDBzLjhPRNdgkZdAAAB',
'fHjm2kxKWjh0wUAKAAAC' ]
From Socket.io v3, rooms is now a protected property of Adapter so you won't be able to access it via io.sockets.adapter.rooms.
Instead use:
const clientsInRoom = await io.in(roomName).allSockets()
OR for multiple rooms
const clientsInRooms = await io.sockets.adapter.sockets(new Set([roomName, roomName2]))
For Socket.io greater than v1.0 and node v6.0+ use the following code:
function getSockets(room) { // will return all sockets with room name
return Object.entries(io.sockets.adapter.rooms[room] === undefined ?
{} : io.sockets.adapter.rooms[room].sockets )
.filter(([id, status]) => status) // get only status = true sockets
.map(([id]) => io.sockets.connected[id])
}
If you want to emit something to them , use this :
getSockets('room name').forEach(socket => socket.emit('event name', data))
This solution is for
socket.io : "3.0.4"
socket.io-redis : "6.0.1"
import these first
const redis = require('socket.io-redis');
io.adapter(redis({ host: 'localhost', port: 6379 }));
socket.on('create or join', function(room) {
log('Received request to create or join room ' + room);
//var clientsInRoom = io.sockets.adapter.rooms[room];
mapObject = io.sockets.adapter.rooms // return Map Js Object
clientsInRoom = new Set(mapObject.get(room))
var numClients = clientsInRoom ? clientsInRoom.size : 0;
log('Room ' + room + ' now has ' + numClients + ' client(s)');
https://socket.io/docs/v3/using-multiple-nodes/#The-Redis-adapter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get
In socket.IO 4.x
const getConnectedUserIdList = async () => {
let connectedUsers = [];
let roomUsers = await io.in(`members`).fetchSockets();
roomUsers.forEach((obj) => {
connectedUsers.push(obj.request.user.id);
});
return connectedUsers;
};
I just logged all sockets in a room to the console, you can do whatever you like with them...
const socketsInRoom = io.adapter.rooms[room_name];
/*Collect all participants in room*/
for(let participant in socketsInRoom){
for(let socketId in socketsInRoom[participant]){
console.log(socketId)
}
}
you can use the adapter method on io object like
io.sockets.adapter.rooms.get("chatroom1")
this will return the list of connected clients in the particular room.
io.sockets.adapter.rooms this is a map off all clients connected to rooms with room name as keys and the connected clients are the values of the room key. map functions are applicable .
socket.io ^2.2.0
const socket = io(url)
socket.on('connection', client => {
socket.of('/').in("some_room_name").clients((err, clients) => {
console.log(clients) // an array of socket ids
})
})
Since I have found very little on how to get the rooms inside a specific namespace, here it is in case anyone is wondering :
io.of(namespaceName).adapter.rooms;
let sockets = await io
.of("/namespace")
.in(ROOM_NAME)
.allSockets();
you can get length of connected clients via
console.log(receiver.size);
You can create an array object of user collection as
var users = {};
then on server side you can add it as new user when you connect
socket.on('new-user', function (username) {
users[username] = username;
});
while displaying the users, you can loop the "users" object
On Client side
var socket = io.connect();
socket.on('connect', function () {
socket.emit('new-user', 'username');
});
I want the server to send a message to all room clients when one of them disconnects.
Something like this:
socket.on('disconnect', function() {
server.sockets.in(room).emit('bye');
});
But...
How do I know which room to broadcast?
What if the client has joined to multiple rooms?
After inspecting the sockets object, I came up with this solution:
socket.on('disconnect', function() {
var rooms = io.sockets.manager.roomClients[socket.id];
for (var room in rooms) {
if (room.length > 0) { // if not the global room ''
room = room.substr(1); // remove leading '/'
console.log('user exits: '+room);
server.sockets.in(room).emit('bye');
}
}
});
not 100% on this - but give it a try:
when connecting to a room or adding a new user to the mix, remember their username or id or something in the socket:
socket.on('adduser', function(username){
socket.username = username;
socket.join('room');
}
Then listen to leave events on rooms:
socket.room.on('leave', function(){
socket.broadcast.to(this).emit(socket.username + ' says seeya!');
}
It's worth a try anyway - I'm sure something similar will work if this doesn't.