是否可以将 Socket.io 与 NuxtJs 一起使用？

Question

我想在我的 Nuxtjs 中使用 socket.io。是否可以？

我尝试了本教程，但出现以下错误：

These dependencies were not found:

* fs in ./node_modules/socket.io/lib/index.js
* uws in ./node_modules/engine.io/lib/server.js

Answer 1

使用 Nuxt.js + Socket.io 的更好方法是遵循核心团队的这个官方示例：https : //github.com/nuxt/nuxt.js/tree/dev/examples/with-sockets

Answer 2

使用 GitHub 上的链接示例更新了答案

我建议使用该nuxt-socket-io模块。它的设置非常简单，并且有很好的文档。

我构建了这个小演示示例，并将列出构建它所采取的步骤（这甚至比npm 包的设置部分更彻底）：

1. 将 nuxt-socket-io 依赖项添加到您的项目中：

   yarn add nuxt-socket-io # or npm install nuxt-socket-io

2. （如果你已经有一个socket.io服务器，你可以跳过这一部分）

   将以下行添加到您的nuxt.config.js文件中：（serverMiddleware: [ "~/serverMiddleware/socket-io-server.js" ]请不要将 serverMiddleware 与中间件混淆，这是两个不同的东西）

   ./serverMiddleware/socket-io-server.js然后，创建可以在其中实现 socket.io服务器的文件。

   // This file is executed once when the server is started
   
   // Setup a socket.io server on port 3001 that has CORS disabled
   // (do not set this to port 3000 as port 3000 is where
   // the nuxt dev server serves your nuxt application)
   const io = require("socket.io")(3001, {
     cors: {
       // No CORS at all
       origin: '*',
     }
   });
   
   var i = 0;
   // Broadcast "tick" event every second
   // Or do whatever you want with io ;)
   setInterval(() => {
     i++;
     io.emit("tick", i);
   }, 1000);
   
   // Since we are a serverMiddleware, we have to return a handler,
   // even if this it does nothing
   export default function (req, res, next) {
     next()
   }
   

3. （如果你已经设置了Vuex，可以跳过这一步）

   添加以下空Vuex存储，即创建文件./store/index.js，因为该模块需要Vuex设置。

   export const state = () => ({})
   

4. 将 nuxt-socket-io 添加到 的模块部分nuxt.config.js，这将启用 socket-io 客户端：

   {
     modules: [
       'nuxt-socket-io',
     ],
     // socket.io configuration
     io: {
     // we could have multiple sockets that we identify with names
     // one of these sockets may have set "default" to true
       sockets: [{
         default: true, // make this the default socket
         name: 'main', // give it a name that we can later use to choose this socket in the .vue file
         url: 'http://localhost:3001' // URL wherever your socket IO server runs
       }]
     },
   }
   

5. 在您的组件中使用它：

   {
     data() {
       return {
         latestTickId: 0,
       };
     },
     mounted() {
       const vm = this;
   
       // use "main" socket defined in nuxt.config.js
       vm.socket = this.$nuxtSocket({
         name: "main" // select "main" socket from nuxt.config.js - we could also skip this because "main" is the default socket
       });
   
       vm.socket.on("tick", (tickId) => {
         vm.latestTickId = tickId;
       });
     },
   }
   

6. 运行它并npm run dev享受您的蜱事件:)