如何在 Strapi 服务器上建立一个 socket 连接。

Question

我正在尝试将socket.io与strapi集成。不幸的是，我没有找到任何适当的教程或文档来涵盖这个方面，所以一直无法做到。

我跟着唯一找到的资源https://medium.com/strapi/strapi-socket-io-a9c856e915a6，但我认为这篇文章已经过时了。我似乎无法运行其中提到的代码，总是遇到很多错误。

以下是我的实现尝试，我一直在尝试通过chrome的websocket插件smart websocket client连接它，但是当我尝试运行服务器时没有得到任何响应。

我完全不知道怎么回事。任何帮助都将不胜感激。

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);
      });
    });
};

- Moiz Sohail

---

你需要在不同的端口初始化服务器，只需在Strapi的引导文件中创建一个套接字服务器，就像通常所做的那样选择不同的端口。 - lucaswerner

Answer 1

所以我找到了解决方案。耶！我将把它放在这里，以防有人需要。

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
  })

};

在这里发现了问题的解决方案：https://github.com/strapi/strapi/issues/5869#issuecomment-619508153_

显然，在服务器启动时无法使用socket.server。因此，您必须利用process.nextTick来等待socket.server初始化。

我还会添加一些我在设置过程中遇到的问题。

如何从外部客户端（如nuxt、vue或react）连接？

你只需要通过"http://localhost:1337"连接即可，这是Strapi的常规地址。

我正在使用nuxt作为客户端，以下是我在客户端上如何设置my socketio：

1. 首先通过npm安装nuxt-socket-io
2. 根据其文档编辑nuxt.config文件

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

3. 然后我终于在我的一个页面中添加了一个监听器。

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

它有效。

- Moiz Sohail

Answer 2

一种将第三方服务整合到 Strapi 中的简洁方法是使用hooks。它们在服务器启动时仅加载一次。在本例中，我们将创建一个本地 hook。

以下示例已在strapi@3.6上运行。

• 在./hooks/socket.io/index.js中为socket.io创建一个 hook

module.exports = strapi => {
  return {
    async initialize() {
      const ioServer = require('socket.io')(strapi.server, {
        cors: {
          origin: process.env['FRONT_APP_URL'],
          methods: ['GET', 'POST'],
          /* ...other cors options */
        }
      })

      ioServer.on('connection', function(socket) {
        socket.emit('hello', `Welcome ${socket.id}`)
      })

      /* HANDLE CLIENT SOCKET LOGIC HERE */

      // store the server.io instance to global var to use elsewhere
      strapi.services.ioServer = ioServer
    },
  }
}

• 启用新的钩子，以便 Strapi 加载它 - ./config/hook.js

module.exports = {
  settings: {
    'socket.io': {
      enabled: true,
    },
  },
};

已完成。您可以在./config/functions/bootstrap.js中访问WebSocket服务器或模型的生命周期钩子。

// ./api/employee/models/employee.js
module.exports = {
  lifecycles: {
    async afterUpdate(result, params, data) {
      strapi.services.ioServer.emit('update:employee', result)
    },
  },
};

- bonniss

Answer 3

如果您正在寻找使用Strapi 4版本的答案

var io = require("socket.io")(strapi.server.httpServer)

- LaoHan