0

I have a nodejs backend and a react frontend. On nodejs I have socketio set up, on the client side I have the connection in the App component, and passed down using context. Now, using hooks, I can use the io variable globally and listen on client-side to events.

However, on server side, I have this IO variable also globally available, but how to use this on multiple pages? I have this code in server.ts:

const io = //initialize io io.on('connection', (socket: any) => { console.log('a user connected', socket.handshake.query); socket.on('disconnect', () => { console.log('user disconnected'); }); io.on('test', console.log); });

But, in a different file, I have to initialize my connection using io.on()again. How to work around this? I have a file called foo.controller.ts which has some actions around foo. In this file I want to listen all events related to foo.

Improve this question

1 Answer 1

Reset to default
4

Create new file ex. socket.instance.js, then create class to handle all socket's logic, like storing sockets list or something (it's up to you what you need);

Here is example of socket.instance.js:

const Subject = require('rxjs').Subject; class SocketInstance { io = require('socket.io')(); sockets = new Set(); newSocket = new Subject(); constructor() { this.io.listen(process.env.PORT); this.io.on('connect', socket => { this.sockets.add(socket); this.handleNewSocket(socket); socket.on('disconnect', () => { this.sockets.delete(socket); }); this.newSocket.next(socket); }); } handleNewSocket(socket) { // logic here } } const socketInstance = new SocketInstance(); module.exports = {socketInstance}

Then in any other file you can access to this instance like this:

// anotherServerFile.js const socketInstance = require('./socket.instance').socketInstance; socketInstance.io.emit('hello'); // yetAnotherFile.js const socketInstance = require('./socket.instance').socketInstance; socketInstance.newSocket.subscribe(socket => { socket.on('test', console.log); });

It's only basic example how to share your socket server instance between any other classes/files in your code. Everything depends on your needs

And on frontend situation is somewhat similar

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

That doesnt solve my issue I think. This way I still pass down io, not socket. For example, how to define socket.on(‘bar’, console.log) in file bar.ts? To have the socket variable, i still need to rewrite io.on(connection)
I updated example for your needs. I just add Subject from rxjs library, you can replace it even with simple event emitter. But now you have access to new connected socket in every file you want, all you need to do is subscribe newSocket
Hi, thanks. I think I just don't understand how it works to start with. Is socket a "per user variable"? I have my server.ts file which defines the on-connect events. The IO variable on client side can be used to listen to server events io.on('test', console.log) but on the server this IO variable is not used for listening to custom events, but the SOCKET variable in the on-connect callback is. SO, if I have 100 custom events I want to listen to, I need to specify them all in 1 file and 1 callback function, right?. How would you do it if you have a lot of custom events?
On server side you have multiple socket variables, because every client is a single object. On your server side logic, you can handle every socket as you want because some sockets needs to listen at bar event and some of them not - it's up to your needs. if I have 100 custom events I want to listen to, I need to specify them all in 1 file and 1 callback function, right? - no you don't have to, you can use this example with newSocket and add this custom events in the other files
But better use TypeScript for whole backend, with this package github.com/typestack/socket-controllers It's what you need, you han simply have access to events across all files using decorators
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.