vue3.0中使用 websocket，封装到公共方法

最新推荐文章于 2025-02-16 23:43:13 发布

望南

最新推荐文章于 2025-02-16 23:43:13 发布

阅读量5.6k

点赞数 7

分类专栏： typescript vue 文章标签： websocket typescript javascript

本文链接：https://blog.youkuaiyun.com/tj310/article/details/122298622

版权

WebSocket 封装消息处理重连机制实时通信

关键词由优快云通过智能技术生成

首先创建一个socket.ts文件封装公共方法

/*
 * @Descripttion: 封装socket方法
 * @version:
 * @Date: 2021-08-06 11:14:39
 * @LastEditTime: 2021-10-26 14:06:34
 */
import i18n from '@/locales'
import store from '@/store'
import {
    ElMessage } from 'element-plus'
import {
    Base64 } from 'js-base64'
const language = store.state.users.language // 当前用户信息，后台配置
const token = store.state.users.authorization // 获取验证信息，后台配置
interface socket {
   
	websocket: any
	connectURL: string
	socket_open: boolean
	hearbeat_timer: any
	hearbeat_interval: number
	is_reonnect: boolean
	reconnect_count: number
	reconnect_current: number
	ronnect_number: number
	reconnect_timer: any
	reconnect_interval: number
	init: (receiveMessage: Function | null) => any
	receive: (message: any) => void
	heartbeat: () => void
	send: (data: any, callback?: any) => void
	close: () => void
	reconnect: () => void
}

const socket: socket = {
   
	websocket: null,
	connectURL: `${
     process.env.VUE_APP_SOCEKT_URL}/websocket/v1/${
     language

最低0.47元/天解锁文章