博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue2.* 中 使用socket.io
阅读量:4110 次
发布时间:2019-05-25

本文共 627 字,大约阅读时间需要 2 分钟。

其实有一种方式和就是在 index.html 中引入 socket.io.js 文件

但作为单页应用 在index.html中引入东西 显然 不好 本博主 也不推荐用这种方式

安装 vue-socket.io (大神封装好的vue插件)

npm install vue-socket.io --save
注册和使用
import VueSocketIO from 'vue-socket.io' 
Vue.use(new VueSocketIO({
    debug: true,
    connection: 'your server url', // socket 服务器所在地址
}))
测试
页面中输出 链接成功 后表示 链接上了 socket服务器
new Vue({
  router,
  store,
  sockets: {
    // 可以用来测试 是否链接成功了
    connect: function () {
        console.log('链接成功')
    },
  },
  render: h => h(App)
}).$mount('#app')
组件中使用
监听 服务器的事件

sockets: {
    // 服务器事件名字
    msg: function() {}   // 举个例子 服务器传来 msg消息
},   // 和methods 是并列关系
methods:{}   
触发事件

this.$socket.emit('msg', {data});   // 第二个参数是要传递的数据

 

转载地址:http://wiesi.baihongyu.com/

你可能感兴趣的文章
启动 LocalDB 和连接到 LocalDB
查看>>
Palindrome Number --回文整数
查看>>
Reverse Integer--反转整数
查看>>
Container With Most Water --装最多水的容器(重)
查看>>
Longest Common Prefix -最长公共前缀
查看>>
Letter Combinations of a Phone Number
查看>>
Single Number II --出现一次的数(重)
查看>>
Valid Parentheses --括号匹配
查看>>
Generate Parentheses--生成匹配括号(重)
查看>>
Remove Element--原地移除重复元素
查看>>
Remove Duplicates from Sorted Array--从有序数组中移除重复元素
查看>>
Count and Say
查看>>
Gas Station
查看>>
Palindrome Partitioning --回文切割 深搜(重重)
查看>>
Valid Palindrome 简单的回文判断
查看>>
Pascal's Triangle -- 生成杨辉三角
查看>>
Pascal's Triangle II 生成杨辉三角中的某行
查看>>
Minimum Depth of Binary Tree -- 二叉树的最小深度 DFS 加剪枝
查看>>
Climbing Stairs 爬楼梯方法 动态规划
查看>>
Merge Two Sorted Lists 合并两个有序链表
查看>>