在vue中使用socket.io

Posted 2023-03-24

参考技术A socket.io的github地址： https://github.com/MetinSeylan/Vue-Socket.io

一、关于socket通信的简单说明

Socket是在应用层和传输层之间的一个抽象层，它把TCP/IP层复杂的操作抽象为几个简单的接口，供应用层调用实现进程在网络中的通信（来源百科）。它是一种全双工（服务端与客户端可同时收发消息）通信，当有数据更新时服务端可以主动的将消息推送到客户端。

二、安装依赖

三、在全局中引入组件

在main.js中引入

四、在组件中使用

注意：下面的 connect 方法和 message 方法是我对接的后台写的监听事件名称，实际使用时每个后台定义的名称都不会一样，这个要事先和你的后台确认好。

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')

参数	类型	默认值	是否必选	描述
debug	Boolean	false	可选择	为调试启用日志记录
connection	String / Socket.io-client	null	必要	Websocket 服务器 url 或 socket.io-client 实例
vuex.store	Vuex	null	可选择	Vuex store 实例
vuex.actionPrefix	String	null	可选择	发出服务器端 vuex 操作的前缀
vuex.mutationPrefix	String	null	可选择	发出服务器端 vuex 突变的前缀

更多参数配置可参考：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 使用教程与踩坑记录