[FIXED] How to set up a socket connection on a strapi server

Issue

I am trying to integrate socket.io with strapi. But unfortunately I have been unable to do so without any proper tutorial or documentation covering this aspect.

I followed along with the only resource I found online which is: https://medium.com/strapi/strapi-socket-io-a9c856e915a6 But I think the article is outdated. I can't seem to run the code mentioned in it without running into tonnes of errors.

Below is my attempt to implement it and I have been trying to connect it through a chrome websocket plugin smart websocket client But I am not getting any response when I try to run the server.

I'm totally in the dark. Any help will be appreciated

module.exports = ()=> {
  // import socket io
  var io = require('socket.io')(strapi.server)
  console.log(strapi.server) //undefined
  // listen for user connection
  io.on('connect', socket => {
  
      socket.send('Hello!');
      console.log("idit")

      // or with emit() and custom event names
      socket.emit('greetings', 'Hey!', { 'ms': 'jane' }, Buffer.from([4, 3, 3, 1]));

      // handle the event sent with socket.send()
      socket.on('message', (data) => {
        console.log(data);
      });

      // handle the event sent with socket.emit()
      socket.on('salutations', (elem1, elem2, elem3) => {
        console.log(elem1, elem2, elem3);
      });
    });
};

Solution

So I found the solution. Yay. I'll put it here just in case anybody needs it.

boostrap.js

module.exports = async () => {
  process.nextTick(() =>{
    var io = require('socket.io')(strapi.server);
    io.on('connection', async function(socket) {

      console.log(`a user connected`)
      // send message on user connection
      socket.emit('hello', JSON.stringify({message: await strapi.services.profile.update({"posted_by"})}));


      // listen for user diconnect
      socket.on('disconnect', () =>{
        console.log('a user disconnected')
      });
    });
    strapi.io = io; // register socket io inside strapi main object to use it globally anywhere
  })

};

Found this at: https://github.com/strapi/strapi/issues/5869#issuecomment-619508153_

Apparently, socket.server is not available when the server starts. So you have to make use of process.nextTick that waits for the socket.server to initialize.

I'll also add a few questions that I faced when setting this up.

How do i connect from an external client like nuxt,vue or react?

You just have to connect through "http://localhost:1337" that is my usual address for strapi.

I am using nuxt as my client side and this is how set up my socketio on the client side

1. I first installed nuxt-socket-io through npm
2. Edited the nuxt.config file as per it's documention

modules:[
  ...
  'nuxt-socket-io',
  ...
],
io: {
    // module options
    sockets: [
      {
        name: 'main',
        url: 'http://localhost:1337',
      },
    ],
  },

3. And then i finally added a listener in one of my pages.

created() {
    this.socket = this.$nuxtSocket({})
    this.socket.on('hello', (msg, cb) => {
      console.log('SOCKET HI')
      console.log(msg)
    })
},

And it works.

Answered By - Moiz Sohail

Answer Checked By - Mary Flores (PHPFixing Volunteer)