如何从 Vue.js 组件连接到 socket.io？

Posted 2023-02-16

【中文标题】如何从 Vue.js 组件连接到 socket.io？

【英文标题】：How to connect to socket.io from Vue.js component?

【发布时间】：2018-05-03 07:13:18

【问题描述】：

我正在使用 Vue-cli webpack 模板来生成我的关于带有 socket.io 的聊天室的项目。

当我单击按钮时，我已经用一个简单的实例对其进行了测试，客户端会将参数发送到服务器端。但是当我点击按钮时，服务器端没有任何东西。

谁能告诉我我的编码有什么问题？我该怎么做才能解决这个问题？

非常感谢！

这里是客户端

<template>
 <div id="app">
 <input type='button' value='button' @click='clickButton()'>
</div>
</template>

<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

  export default 
    name: 'app',
    data() 
      return 
      msg: 'Welcome to Your Vue.js App'
    
  ,
  sockets: 
    connect: function() 
     console.log('socket connected')
  ,
  customEmit: function(val) 
     console.log('this method was fired by the socket server. eg: 
     io.emit("customEmit", data)')
    
  ,
  methods: 
     clickButton: function(val) 
     // $socket is socket.io-client instance
     this.$socket.emit('a', 12, 5);
  
  
  
  </script>

这是服务器

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io');

server.listen(8070);

const ws = io.listen(server);

ws.on('connection',(sock)=>
  sock.on('a',(num1,num2)=>
    console.log(`$num1,$num2`)
  )
)

【参考方案1】：

  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

这应该只在创建 Vue 实例之前完成一次。不在组件中。

由于你使用的是Vue-cli webpack，所以应该在main.js之前完成new Vue()

【讨论】：

@Sylvia 只有import 和Vue.use。之后你可以在任何组件中使用this.$socket

对不起，我尝试在 main.js 中写 'import' 和 'Vue.use' 并写了 sendMsg()this.$socket.emit('a',12,5)在 App.vue 中，但它仍然 console.log 什么都没有...@Jacob Goh

@Sylvia 我不确定你这边的确切代码是什么。我测试了你的代码。有用。它在github.com/jacobgoh101/SO-50148977-client。请参阅 github.com/jacobgoh101/SO-50148977-client/blob/master/src/… 和 github.com/jacobgoh101/SO-50148977-client/blob/master/src/… 。我可以使用您的确切服务器代码在服务器控制台中获取12,5。

我非常感谢@JacobGoh 花时间进行设置。在我使用你的回购示例之前，我被困了一段时间。

【参考方案2】：

import socketio from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
export const SocketInstance = socketio('http://localhost:8081');
 Vue.use(VueSocketIO, SocketInstance)

【讨论】：

虽然此代码可能会回答问题，但提供有关其解决问题的方式和原因的信息可提高其长期价值。

虽然此代码可能会回答问题，但最好在此处包含答案的基本部分并提供进一步的解释。如果 API 发生变化，纯代码答案可能会失效。

【参考方案3】：

在 main.js 中导入 vue-socket.io 包后，您可能需要将其实例化为一个新类

import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO( 
  connection: io('localhost') 
))

根据文档https://www.npmjs.com/package/vue-socket.io

【讨论】：

它仅在页面重新加载时启动连接。如果您从一个组件导航到另一个组件，则不会启动连接。