vue使用socket.io做到数据长链接

叫我官人_

于 2018-09-06 10:49:25 发布

阅读量3.5k

点赞数

分类专栏： vue 文章标签： vue实时 vue-socket.io

本文链接：https://blog.youkuaiyun.com/doinb_6/article/details/82456171

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Socket.io，并实现与后端的实时通信。具体步骤包括安装vue-socket.io插件、配置socket连接以及在组件中监听自定义事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用socket协议

vue-cli 脚手架目录结构

1.参照vue-socket.io的git地址说明文档进行安装

npm install vue-socket.io

2.main.js里面注册一下。vue.use 里面的链接是后台的提供给你的socket地址

// socket
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://xxx.xxx.com:2018');//这里的url是后台提供的socket的地址

3.组件中使用socket. new_msg 这个方法是后台提供的socket的方法，注意方法名字要一样，这里的msg就是获取的数据

sockets:{
connect: function(){
this.id=this.$socket.id
},
//这里的new_msg是后台提供的方法，如：后台提供的方法为mysocket,则这里的方法名就是mysocket,
        new_msg: function(msg){
console.log(msg);//msg就是获取的数据
}
},

ok！