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

关键词：

【中文标题】如何从 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

【讨论】：

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

将html页面连接到vue页面

...目【问题讨论】：【参考方案1】：通过简单地创建一个组件并将静态HTML代码复制粘贴到组件tem 查看详情

如何从 Talend Open Studio 连接到 MongoDB？

】如何从TalendOpenStudio连接到MongoDB？【英文标题】：HowtoconnecttoMongoDBfromTalendOpenStudio?【发布时间】：2021-05-2015:22:30【问题描述】：我正在尝试从TalendOpenStudio连接到MongoDB数据库，但遇到了一些问题。起初，我什至没有连接到MongoDB... 查看详情

Vue Js Nginx Docker 连接到后端

...端通信，当我调用时，我需要指定后端服务端口和端点。如何使用nginx和docker，然后在使用nginx和docker之后，应用程序如何与后端通信？最终我需要在Kubernetes集群上部署前端和后端服 查看详情

如何从 C# 连接到 HyperSQL DB

】如何从C#连接到HyperSQLDB【英文标题】：HowtoconnecttoHyperSQLDBfromC#【发布时间】：2012-09-0608:59:39【问题描述】：我们正在寻找具有所需功能的内存数据库：客户端/服务器模式支持SQL、存储过程可以在“内存中”模式下运行轻巧快... 查看详情

Vue.js：将变量连接到图像 URL

】Vue.js：将变量连接到图像URL【英文标题】：Vue.js:ConcatenatevariableintoimageURL【发布时间】：2020-01-2323:21:13【问题描述】：我是Vue.js的新手，正在尝试创建一个src文件路径包含变量的图像。我很难在Vue.js中进行连接。我有这样的图... 查看详情

如何从 Firebase 存储中删除 Vue.js 组件图像？

】如何从Firebase存储中删除Vue.js组件图像？【英文标题】：HowtodeleteVue.jscomponentimagefromFirebasestorage?【发布时间】：2019-12-1503:53:59【问题描述】：我正在构建一个Vue.js组件，该组件可以在Firebase上上传和删除图像。到目前为止，我... 查看详情

如何使用 Vue.js 组件从 Firestore 中删除图像

】如何使用Vue.js组件从Firestore中删除图像【英文标题】：HowtodeleteimagesfromFirestorewithVue.jscomponent【发布时间】：2019-12-1312:41:16【问题描述】：我正在尝试重新利用我之前找到的Vue.js图像上传器组件(https://codesandbox.io/s/219m6n7z3j)。该... 查看详情

如何将 React 组件连接到 Quickbooks 按钮

】如何将React组件连接到Quickbooks按钮【英文标题】：HowtoconnectReactcomponenttotheQuickbooksButton【发布时间】：2017-08-1400:31:54【问题描述】：我正在尝试将Quickbooks按钮(https://developer.intuit.com/docs/0100_quickbooks_online/0100_essentials/000500_authentic 查看详情

如何在 Vue.js 中将数据从父组件发送到子组件

】如何在Vue.js中将数据从父组件发送到子组件【英文标题】：HowtosenddatafromparenttochildcomponentinVue.js【发布时间】：2019-04-1122:12:10【问题描述】：我是vue.js的新手，目前我正在构建一个用于学习目的的应用程序。我想做什么：我有... 查看详情

如何在 vue.js 中将卡片数据从一个组件绑定到另一个组件卡片？

】如何在vue.js中将卡片数据从一个组件绑定到另一个组件卡片？【英文标题】：Howtobindcarddatafromonecomponenttoanothercomponentcardinvue.js?【发布时间】：2021-09-0411:37:35【问题描述】：我有两个组件，一个是显示卡，它负责将数据显示到... 查看详情

如何从方法访问 Vue.js 组件数据？ [复制]

】如何从方法访问Vue.js组件数据？[复制]【英文标题】：HowtoaccessVue.jscomponentdatafromamethod?[duplicate]【发布时间】：2018-04-2722:01:30【问题描述】：基于vuejsdocs，我希望以下代码可以工作，但是当我单击按钮时this为空：<template><... 查看详情

如何将按钮事件连接到另一个 React 组件？

】如何将按钮事件连接到另一个React组件？【英文标题】：HowtoconnectabuttoneventtoanotherReactcomponent?【发布时间】：2019-07-0509:37:07【问题描述】：我正在学习React，我正在尝试制作一个简单的应用程序：您单击一个按钮，它会增加一... 查看详情

Vue JS 3：如何将数据从一个组件传递到另一个组件？

】VueJS3：如何将数据从一个组件传递到另一个组件？【英文标题】：VueJS3:Howtopassdatafromonecomponenttoanotherother?【发布时间】：2021-09-1410:09:32【问题描述】：我正在尝试共享存储在Favorites.vue文件的收藏夹组件中的变量favorite_count中的... 查看详情

如何在 Vue.js 中将数据从 Test1 组件传递到 Test2 组件？

】如何在Vue.js中将数据从Test1组件传递到Test2组件？【英文标题】：HowtopassDatafromTest1ComponenttoTest2ComponentinVue.js?【发布时间】：2020-09-0405:34:50【问题描述】：我有一个名为Test1.vue的组件，其中我有一个值总计：120，我希望这个值传... 查看详情

如何将数据从 PHP Laravel 传递到 Vue.js 并在数据更改时重新渲染 Vue.js 组件？

】如何将数据从PHPLaravel传递到Vue.js并在数据更改时重新渲染Vue.js组件？【英文标题】：HowdoIpassdatafromPHPLaraveltoVue.jsandre-renderaVue.jscomponentwhenthedatachanges?【发布时间】：2019-07-0814:05:30【问题描述】：我对Vue.js还是有点陌生​​，所... 查看详情

如果从组件连接到单独的文件中，则不传递道具？(代码片段)

在我的文件夹中，我有这个结构Component.tsxconnect.tsindex.ts在用于连接的单独文件中importconnectfrom'react-redux'importactionsfrom'../../redux/actions';importComponentfrom'./Component';constmapStateToProps=(state:any/*,ownP 查看详情

我如何将数据从控制器传递到组件 vue.js

】我如何将数据从控制器传递到组件vue.js【英文标题】：HowcaniPassdatafromcontrollertocomponentsvue.js【发布时间】：2020-06-1109:27:08【问题描述】：我想在表单选择中显示客户端，但我的from和组件脚本form没有发生任何事情script【问题讨... 查看详情

如何从视图中调用组件中的方法？ (vue.js 2)

】如何从视图中调用组件中的方法？(vue.js2)【英文标题】：HowcanIcallmethodinthecomponentfromview?(vue.js2)【发布时间】：2017-07-0819:27:23【问题描述】：我的看法是这样的：<divclass="rowno-gutter"><divclass="col-md-9col-xs-12"><divclass="wrap-... 查看详情