Socket.io Best coding practice - node.js

I'm developing a Node.js application which uses Socket.io to handle the real time communication. My code is full of On and Emit functions. I use room feature as well. my app looks like this:
var server = require('http').Server();
var io = require('socket.io')(server);
io.on('connection', function(socket){
socket.on('event1', function(data){"lots of socket and non-socket codes" });
socket.on('event2', function(data){"lots of socket and non-socket codes" });
socket.on('event3', function(data){"lots of socket and non-socket codes" });
socket.on('disconnect', function(){"Some other code"});
});
server.listen(portNum);
it works fine but It is not my ideal solution.
Firstly, in this approach everything is in one big file instead of smaller file with isolated functionality.
secondly, it is quite difficult to debug and maintain this app as it is quite messy when it comes to 1000+ lines of code.
Here is my question:
Is there a preferred/best practice on developing enterprise quality Socke.io applications?
If yes, Is there any large opensource Socket.io application that demonstrait this approch or any article which help me to refactor my code in a better fassion?

I think starting by putting every callback function in a different function that you put out of io.on('connection'), and maybe also put them in a different file (using module.exports), you will start having a clearer application.
Ok so i will write you one possibility that i use, i don't know if it's the best pattern of the universe for socket.io, but that's good i think.
In your main file (the file with io.onconnection), you can have something like this (you dont have to use namespace, it's just an example) :
var SocketEvent = require('./socketEvent');
io.of('/user').on('connection', function (socket) {
SocketEvent.load_common_event(socket);
SocketEvent.load_user_event(socket);
});
io.of('/operator').on('connection', function (socket) {
SocketEvent.load_common_event(socket);
SocketEvent.load_operator_event(socket);
});
And in the socketEvent.js that you load you can have this :
exports.load_common_event = function(socket){
socket.on('disconnect', function(){"Some other code"});
};
exports.load_user_event = function(socket){
socket.on('event1', function(data){"lots of socket and non-socket codes" });
socket.on('event2', function(data){"lots of socket and non-socket codes" });
socket.on('event3', function(data){"lots of socket and non-socket codes" });
};
exports.load_operator_event = function(socket){
socket.on('event4', function(data){"lots of socket and non-socket codes" });
socket.on('event5', function(data){"lots of socket and non-socket codes" });
socket.on('event6', function(data){"lots of socket and non-socket codes" });
};
Let me know if you have any question
Add-on
If you want something like Socket.on('event' , myModule.doSomething);
you can do like this i guess in the module :
client :
var myModule = require('./socketModule');
io.on('connection', function (socket) {
socket.on('event' , myModule.doSomething(/*some parameters (socket)*/));
});
server socketModule.js :
exports.doSomething = function(/*some parameters (socket)*/){
/* Some processing around */
};

For those who are wondering about pass paremeters, .bind could be an option
const events = require('./events.js')
io.of('/chat').on('connection', (socket) => {
socket.on('print', events.print.bind({socket, io}))
})
event.js
const util = require('util')
function print(data) {
console.log(util.inspect(this.socket).substr(0, 100))
console.log(util.inspect(this.io).substr(0, 100))
}
module.exports = {
print
}

More use of pages, less code in each, share them independently when needed:
Note I assume you are working with express. If not, just remove express from my demos.
// app.js
var app = require('express')();
module.exports = app;
// server.js
var app = require('./app');
var server = require('http').createServer(app);
module.exports = server;
//socket-io-redis.js
var server = require('../server');
var io = require('socket.io')(server);
var redis = require('socket.io-redis');
io.adapter(redis({ host: 'localhost', port: 6379 }));
io.set('origins', '*:*');
module.exports = io;
Now on every page on your API or on your server you can just import the Io instance (reference and efficient) like this:
var Io = require('../path/to/io-config-file');
console.log(Io); // object
Io.to(room).emit(event, payroll);
You can also make a main connection file like this:
Note I'm pasting here the exact code that I actually use, just in order to show you some of my best practices (of course, adapt and adjust this as your needs):
var { Io } = require('#dependencies/_index');
var Defaults = require('#helpers/defaults');
var _index = require('./services/_index');
const {
validate,
get_user,
subscribe
} = _index;
Io.on("connection", socket => {
socket.on("join", async info => {
await validate(info);
await subscribe(await get_user(info), info, socket, 'join');
});
socket.on("leave", async info => {
await validate(info);
await subscribe(await get_user(info), info, socket, 'leave');
});
});
In the example above, I listen for new connections and securely verified subscribe them to the respective rooms. I am using services in order to so - they are independent as I said that's how all your code should be like.

Related

Multiple socket.io instances at different paths

I'm making a REST API that works with routes and actions like /api/route/action. But I want to add WebSocket functionalities. So I want WebSockets to also be addressable by url.
I have this code:
const socketio = require('socket.io');
//server is a http.createServer()
module.exports = server => {
const io = socketio(server, { route: '/socketapi/test' );
io.on('connection', s => {
s.on('a', () => s.emit('b'));
s.emit('message', 'You connected to /test.');
});
const io2 = socketio(server, { route: '/socketapi/something_else' });
io2.on('connection', s => {
s.on('z', () => s.emit('y'));
s.emit('message', 'Hi');
});
};
The reason why I want to split them is so I don't have to keep track of event names I've already used, and so I can separate the logic in the connection event.
But it seems this is not possible. If I have two socket.io instances running I can't connect to either.
Is this possible or will I have to use some tricks and perhaps an event that the client can send to let me know what it wants to subscribe to?
You can use a built in feature of socket.io called namespaces to achieve this behaviour.
Here is a basic example:
Server side:
const nsp = io.of('/my-namespace');
nsp.on('connection', function(socket){
console.log('someone connected');
});
nsp.emit('hi', 'everyone!');
Client side:
const socket = io('/my-namespace');
Now the client can emit and receive messages which are specific to a namespace. With the use of namespaces your problem of name conflicts of the events, will be solved.

Socket.io with Adonis.js

I am using Adonis 4.1.0 and Adonis-websocket is only been available for v3. Can anyone tell me workaround for using socket.io with Adonis 4.1.0?
apparently they have been working on this not long ago, it was based on socket.io but because of some issues like memory leaks and others, they decided to use websockets directly instead, check these discussions :
https://github.com/adonisjs/discussion/issues/51
https://forum.adonisjs.com/t/integrating-socket-io-with-adonis-4/519
have you tried using socket.io without relying on Adonis ? ,
something like :
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');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
But you should be able to do this with Adonis by now according to : https://github.com/adonisjs/adonis-websocket-protocol
Example :
const filereader = require('simple-filereader')
const msgpack = require('msgpack-lite')
const packets = require('#adonisjs/websocket-packets')
const client = new WebSocket('ws://localhost:3000/adonis-ws')
client.onopen = function () {
// TCP connection created
}
client.onerror = function () {
// TCP connection error
}
client.onmessage = function (message) {
filereader(message, function (error, payload) {
const packet = msgpack.decode(payload)
handlePacket(packet)
})
}
function handlePacket (packet) {
if (packets.isOpenPacket(packet)) {
console.log('Server ack connection. Make channel subscriptions now')
}
if (packets.isJoinAck(packet)) {
console.log('subscription created for %s', packet.d.topic)
}
}
check this for broadcast examples using WS : https://github.com/websockets/ws#broadcast-example
Create start/socket.js file and paste following code inside it.
const Server = use('Server')
const io = use('socket.io')(Server.getInstance())
io.on('connection', function (socket) {
console.log(socket.id)
})
From Virk Himself in this forum:https://forum.adonisjs.com/t/integrating-socket-io-with-adonis-4/519
create a standalone socket io configuration file in start/socket.js
const io = require('socket.io')();
io.listen(3000);
io.on('connection', function (socket) {
console.log(socket.id)
})
to start your socket io server you can configure your server.js as below
new Ignitor(require('#adonisjs/fold'))
.appRoot(__dirname)
.preLoad('start/socket') //path of socket.js
.fireHttpServer()
.catch(console.error)
now when you start your server then it will start along with socket io

var socket = io.connect('http://yourhostname/');?

I try socket.io again since v.1.0 released.
As the doc,
https://github.com/Automattic/socket.io
Server side:
var server = require('http').Server();
var io = require('socket.io')(server);
io.on('connection', function(socket){
socket.on('event', function(data){});
socket.on('disconnect', function(){});
});
server.listen(5000);
Client side
var socket = io.connect('http://yourhostname.com/');
In development, surely
var socket = io.connect('http://localhost:5000/');
It works, but I'm very uncomfortable with hardcoding the hostname(subdomain.domain) in the client code(/index.js).
The index.js is hosted by the http-sever and the socket.io is bundled to the http-server in this configuration.
Is there any smart way not to hardcode the hostname but to code in some relative path?
Thanks.
EDIT:
When I try:
var socket = io.connect('./');
The connection error:
GET http://.:5000/socket.io/?EIO=2&transport=polling&t=1401659441615-0 net::ERR_NAME_NOT_RESOLVED
is like this, so at least the port number (5000) is obtained properly without hardcoding in the client side.
Final answer.
I have totally forgotton that we can obtain the current url/domain in browser.
window.location.hostname
So, simply goes:
'use strict';
/*global window, require, console, __dirname, $,alert*/
var log = function(msg)
{
console.log(msg);
};
log('init');
$('document').ready(function()
{
var io = require('socket.io-client');
var socket = io.connect(window.location.hostname);
socket.on('connect', function()
{
log('socket connected');
});
});
You have to remember that Node.js is not a web server. It's a platform. When you specify a relative path, it doesn't know that you mean "relative to the current domain."
What you need to do is send the domain to the client when you send them the webpage (I don't know the specifics of your setup, but perhaps using a template variable?), and send them the localhost:5000 domain if you're in development, or your real domain if you're in production (alternatively, you can use a library like nconf, but you get the idea).
dunno, so far I did as follows:
'use strict';
/*global window, require, console, __dirname, $,alert*/
var log = function(msg)
{
console.log(msg);
};
log('init');
$.getJSON("../config.json", function(data)
{
var host = data.url;
var port = data.port;
$('document').ready(function()
{
alert(host + ':' + port);
var io = require('socket.io-client');
var socket = io.connect(host);
socket.on('connect', function()
{
log('socket connected');
});
});
});
It's browserified with socket.io-client.

How to emit event in socket.io based on client?

I am working on realtime data visualization application using node.js, express and socket.io.
Requirement:
Have to emit the events based on the client request.
For example: If user enter the url as http://localhost:8080/pages socket.io should emit the topic pages to client and another user request for http://localhost:8080/locations socket should emit location to that particular user.
Code
var server = app.listen("8080");
var socket = require('socket.io');
var io = socket.listen(server);
var config = {};
io.on('connection', function (socket) {
config.socket = io.sockets.socket(socket.id);
socket.on('disconnect', function () {
console.log('socket.io is disconnected');
});
});
app.get('/*', function(req, res) {
var url = req.url;
var eventName = url.substring('/'.length);
//pages and locations
config.socket.volatile.emit(eventName, result);
});
Client Code:
//No problem in client code.Its working correctly.
Sample code as follows
socket.on('pages', function (result) {
console.log(result);
});
Problem:
It is emitting pages and locations to both the clients.
Any suggestion to overcome this problem.
I couldn't understand your approach on this, but because you said you're rendering different pages, It means you can serve different code, so what about doing it like this:
Server Side:
var server = app.listen("8080");
var socket = require('socket.io');
var io = socket.listen(server);
var config = {};
app.get('/pages', function(req, res) {
res.render('pages.html');
});
app.get('/locations', function(req, res) {
res.render('locations.html');
});
io.on('connection', function (socket) {
socket.on('pagesEvent', function(data){
socket.volatile.emit('pages', {your: 'data'});
});
socket.on('locationsEvent', function(data){
socket.volatile.emit('locations', {your: 'data'});
});
});
On Client side:
pages.html:
socket.on('connect', function(){
socket.emit('pagesEvent', {});
});
socket.on('pages', function(data){
// do stuff here
});
locations.html:
socket.on('connect', function(){
socket.emit('locationsEvent', {});
});
socket.on('locations', function(data){
// do stuff here
});
You are doing it wrong, WebSockets supposed to work same in both directions. Client emit event to Server, server emit back to Client/Subscribers.
The way you are doing things, seems like a way of implementing API, but for some reason you are trying to implement it with WebSockets, instead of XHR.

Working with Routes in express js and socket.io and maybe node in general

I am trying to write a multi channel application in socket.io. The channel you are in should be defined by the url you are on. If I do the joining part in the app.js with permanent values everything works. As soon as I change it so that the route for route.page does the joining I get the error, that sockets is not available in the context. What would be the correct way so that I can dynamically join the channel?
/app.js
var io = socketio.listen(app);
require('./io')(io);
io.sockets.on('connection', function (socket) {
socket.on('debug', function (message) {
socket.get('channel', function (err, name) {
socket.in(name).broadcast.emit('debug', message);
});
});
});
/io.js
var socketio = function (io) {
if (!io) return socketio._io;
socketio._io = io;
}
module.exports = socketio;
/routes/index.js
var io = require('../io')();
exports.page = function(req, res){
var channel = req.params.id;
res.render('page', { title: 'PAGE', channel: channel });
io.sockets.on('connection', function (socket) {
socket.join(channel);
socket.set('channel', channel );
});
};
The easiest way I've found to do multiple channels is off of different URLs.
For example I have the client do the following:
io.connect('/game/1')
io.connect('/system')
and on the server I have
io.of('/game/1').on('connect' function(socket) {...})
io.of('/system').on('connect' function(socket) {...})
It looks like I'm connecting twice here, but socket.io is smart enough to use a single websocket for this connection (at least it says so in the how-to-use).

Resources