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

我想在我的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

---

使用Nuxt.js+Socket.io的更好方法是遵循核心团队的官方示例：

Nuxt+Socket.io 对我来说：

将项目创建为nodejs应用程序（非静态页面）

安装socket.io

npm i socket.io

将serverMiddleware部分添加到

numxt.config.js

：

导出默认值{
...,
服务器中间件：[
{path:'/ws'，handler:'~/api/srv.js'}，
],
}

创建中间件

/app/srv.js

：

const-app=require（'express'）（）
const socket=require（'socket.io'）
让服务器=null
设io=null
应用程序所有（'/init'，（请求，请求）=>{
如果（！服务器）{
server=res.connection.server
io=套接字（服务器）
io.on（'连接'，函数（套接字）{
log（'makesocketconnection'）；
socket.on（'msg'，msg=>{
console.log（'received:'+msg）
设置超时（（）=>{
emit（'msg'，'Response to:${msg}`）
}, 1000)
})
socket.on（'disconnect'，（）=>console.log（'disconnected'））
})
}
res.json（{msg:'server is set'}）
})
module.exports=app

Socket.io需要的服务器不是在中间件中创建的，这就是为什么从

res.connection.server

从firest请求到应用程序的服务器

创建页面

页面/索引.vue

：

发送


导出默认值{
负责人：{
脚本：[
{src:'https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js'},
],
},
数据（）{
返回{
套接字：null，
msg:'wwJd'，
响应：''，
}
},
挂载（）{
这是.$axios.$get（'/ws/init'）
。然后（resp=>{
this.socket=io（）
this.socket.on（'msg'，msg=>this.resps+=`${msg}\n`）
})
},
}

运行它

npm运行dev

修改并享受：-）

在GitHub上更新了带有链接示例的答案

我建议使用。这真的很容易，而且有一个很好的方法

我构建了，我将列出我构建它所采取的步骤（这甚至比npm包的设计更彻底）：

将nuxt套接字io依赖项添加到项目中：

纱线添加nuxt插槽io#或npm安装nuxt插槽io

（如果您已有socket.io服务器，则可以跳过此部分）

在您的

numxt.config.js

文件中添加以下行：

serverMiddleware:[“~/serverMiddleware/socket io server.js”]

（请不要将serverMiddleware与middleware混淆，这是两种不同的东西）

然后，创建文件

/serverMiddleware/socket io server.js

，您可以在其中实现socket.io服务器

（如果已经设置了Vuex，则可以跳过此操作）

添加以下空Vuex存储，即创建文件

/store/index.js

，因为模块需要设置Vuex

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

将nuxt套接字io添加到

numxt.config.js

的模块部分，这将启用套接字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
     }]
   },
 }

在组件中使用它：

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

使用

npm Run dev

运行它，享受您的滴答声活动：）

---

您使用哪个版本的Node.js？那么你能在你的“package.json”文件中分享DEP的列表吗？嗨，我希望我来参加聚会不会太晚，但我决定将这个例子模块化，使它更“npm友好”，并推动npm回购。我刚刚写的想法是：只需npm安装它，在nuxt.config中配置套接字，然后使用它。嗨@Markus我试过了，但没有成功，我可能错过了server.js吗？请你设置好所有的步骤好吗？谢谢你！您能分享一下您的服务器文件吗？您好@BKF。我最初的回答没有包括任何服务器代码。我更新了我的答案，以显示完整的客户端和服务器端。Hello@PirateApp。我没有访问代码了，但是我用我的星期六设置了下面的演示项目，并相应地更新了答案。希望这有帮助！

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