VUE群号：115658205

Vue3+ts当中使用socker.io正常接入...直接上代码

import {onMounted, ref} from 'vue'
import { io } from 'socket.io-client'

const socket = io('https://xxxxxx:9966')
const barrageArr = ref<any>([])

onMounted(() => {
  conn() // 链接房间方法
  socket.on('connect', () => {
    console.log('connect: websocket 连接成功！')
  })
  socket.on('broadcastingListen',(data) => {
    console.log(JSON.parse(data).msg[0], 'broadcastingListen')
    barrageArr.value.push(JSON.parse(data).msg[0]) // 接入socker传递的数据并且传入数组
  });
});

const conn = () => {
  const data = {
    // 指定参数
  }
  socket.emit('conn', data)
}

在页面的请求中，EIO的参数为4

可能是因为后端传递的版本过低，所以升级到3/4才能链接成功

否则sid无法添加上去进行握手

例如：

或完全不执行请求，连接不上

后端升级版本4之后兼容2+3的socket连接app端进行操作

之后的问题是socket在ios中因为版本4虽然兼容了2+3但是还是会出现无法串在一起的情况

处理方法1.后端对版本兼容并且因为socket.io2升级socket.io4的同时还升级了to等方法导致无法对ios的部分功能兼容问题出现

处理方法2.前端将vue3版本降低为vue2进行重写重构

因为 socket.io在3.x版本之后才支持的vue3所以更换版本3为2 EIO的参数更改为3可以同时对低版本兼容约等于重写

---------------------------------------------------------------------------------------------------------------------------------

2022/05/04

关于该问题最新进展

对socket.io-client的方法进行了重写封装为vue3可用的方法

window.$socket需要重新在文件中的window写入这个方法类型为any

socket-io.ts

import { App, inject } from "vue"
import { io, Socket } from 'socket.io-client'

let nkSocket: Socket = null

const rnSocket = (): Socket => {
  return nkSocket || window.$socket || inject('socket')
}

const installSocket = (app: App<Element>, { connection, options }: { connection: any, options: any }) => {
  const socket: Socket = io(connection, options)
  nkSocket = socket
  window.$socket = socket
  app.provide('socket', socket)
}

export function setUpSocketIo(app: App<Element>) {
  app.use(installSocket, {
    connection: import.meta.env.VITE_BASE_IO,
    options: {
      autoConnect: false,
    },
  })
}

export { rnSocket }

此处对 socket.io-client 进行了封装

在 main.ts 中引入

import { setUpSocketIo } from "./utils/socket-io"

setUpSocketIo(app)

引入之后挂载

在指定文件

import { io } from 'socket.io-client'

引入 socket.io-client 通过正常方式引用即可

const socket = io('https://server.xxxxx.com:19966')

---------------------------------------------------------------------------------------------------------------------------------

2022/05/26

因为vue3+ts的使用方式与vue2的区别

换一种方式引入socket.io

在index.html页面中指引引入相对应的版本号也是可以直接解决上述问题的

并且在使用过程中会相对重写方法更加便捷