Vue中 引入使用 vue-socket.io

安装及引入

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

npm地址: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 官方文档

请登录后发表评论

    没有回复内容