Vue中 引入使用 vue-socket.io

简介: Vue中 引入使用 vue-socket.io

传送门:Vue中 使用 WebSocket

1. 安装及引入

vue-socket.io 其实是在 socket.io-client(在浏览器和服务器之间实现实时、双向和基于事件的通信) 基础上做了一层封装,将 $socket 挂载到 vue 实例上,同时可使用 sockets 对象轻松实现组件化的事件监听,在 vue 项目中使用起来更方便。

安装:

vue-socket.io npm地址

npm i vue-socket.io

引入:

// main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
Vue.use(
  new VueSocketIO({
    // 生产环境建议关闭,开发环境打开(在控制台看到socket连接和事件监听的信息)
    debug: true, 
    connection:'http://metinseylan.com:1992',
    options:{
      // 创建时是否自动连接 我们这里设定为false,在指定页面再开启
      autoConnect: false,
      // 路径(默认值:/socket.io/) 
      path: "/my-app/",
      // 目前有两种传输方式:HTTP long-polling(可简称:polling)、WebSocket
      transports: ['polling'],
      // 附加请求头(在服务器端的 socket.handshake.headers 对象中找到)
      extraHeaders:{},
    },
    // 如果没有使用到 store 可不写
    vuex: {
      store,
      actionPrefix: 'SOCKET_',// vuex action 前缀
      mutationPrefix: 'SOCKET_', // vuex mutation 前缀
    },
  })
)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

image.png

更多参数配置可参考:Socket.IO 官方文档

2. 组件内使用

<template>
  <div class="wrap">
    <button @click="socketEmit">连接Socket</button>
    <button @click="socketSendmsg">发送数据</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      randomId:null,
    }
  },
  methods:{
    socketEmit(){
      // 开始连接 socket
      this.$socket.open();
      // 订阅事件,testCall 是与后端约定好的名称
      this.sockets.subscribe('testCall', (res) => {
        if(res.code == 200 && res.randomId === this.randomId){
          console.log('召唤成功')
        }
      })
    },
    // 发送消息
    socketSendmsg(){
      this.randomId = Math.random();
      // testCall 是与后端约定好的名称
      this.$socket.emit('testCall', { 
        "randomId": this.randomId,
        "deviceId": "123456"
      });
    },
  },
  sockets: {
    connect: function () {
      console.log('连接成功')
    },
    disconnect: function () {
      console.log('断开连接')
    },
    reconnect: function () {
      console.log('重新连接')
    },
  },
  beforeDestroy(){
    // 关闭 Socket
    this.sockets.unsubscribe('testCall'); 
    this.$socket.close();
  },
}
</script>

参考文章:vue-socket.io 使用教程与踩坑记录

相关文章
|
JavaScript 定位技术 API
论vue引入百度离线地图
先附上链接,下面会用到:百度地图传送门
1063 0
|
6月前
|
缓存 JavaScript 前端开发
[译] Vue.js 内部原理浅析
[译] Vue.js 内部原理浅析
|
9月前
|
JavaScript
Vue3基础之v-bind与v-on
Vue3基础之v-bind与v-on
174 0
|
JavaScript 数据格式 容器
[Vue]初始Vue--HelloWorld引入案例
[Vue]初始Vue--HelloWorld引入案例
|
9月前
|
JavaScript 前端开发
Vue 中setup的特性
Vue 中setup的特性
|
9月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
存储 缓存 JavaScript
【Vue2.0源码学习】内置组件篇-keep-alive
【Vue2.0源码学习】内置组件篇-keep-alive
134 0
|
JavaScript
vue3_文件复用setup
vue3_文件复用setup
159 1
|
JavaScript 开发者
vue2源码系列-深入响应式原理Vue.set
前面我们在 vue2源码系列-响应式原理 中介绍了 vue 中的整个响应式实现及流程,其中跳过了某些细节性的代码,现在我们再去好好学习研究一番
|
JavaScript 前端开发
从 vue 源码看问题 —— vue 如何进行异步更新?
从 vue 源码看问题 —— vue 如何进行异步更新?
103 0

热门文章

最新文章