【Websocket】、【vue】封装websocket并将方法注入window中

本文介绍了在Vue应用中如何简单地使用WebSocket进行通信,包括建立连接、发送消息、错误处理和断开连接。此外,还展示了如何将WebSocket功能封装到一个js文件中,并将其注册到window全局,以便在Vue组件中方便调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:在vue中使用websocket其实非常简单,建立对话,发送消息,断开连接,如果连接失败需要接收错误信息并断开连接。

那么先来简单介绍一下在vue中使用websocket的代码片,然后再介绍如何将websocket封装到外部在window中全局调用。

一、websokcet简介

1.websocket是一个基于在TCP的全双工通信协议,它的协议为ws或者wss,即对应http协议和https协议。
2.websocket只需要建立一次连接,即可收发消息,直到断开连接。

二、在vue中使用websocket

在一个.vue文件中,定义方法

handleWebsocket(){
	let ws = new WebSocket("ws://xxx.xxx.x.xxx:9090")//ws根据需要更改
	//打开websocket
	ws.onopen = (e) => {
		console.log('open------------------',e)
		//打开后发送数据,需要写在open里,否则在对话没有打开之前无法执行send
		let data = {
			'op':'message'
		}
		ws.send(JSON.stringify(data)) //send括号中的内容可以根据实际情况进行更改
	}
	//接收消息,e为接收到的消息,一般是存在e.data中,可以打印出来看一下e中有什么
	ws.onmessage = (e) => {
		console.log('message----------------',e)
		console.log(JSON.parse(e.data))
	}
	//错误回调,如遇到错误则让连接自动关闭
	ws.onerror = (e) => {
		ws.close()
		console.log('建立连接失败--------------',e)
	}
}

三、将websocket封装在js中并保存与window中,在.vue页面中调用

1.在项目中新建一个工具文件,我是存放于src下新建的util的文件夹中,起名为websocket.js

websocket.js

	var websocketStore = {}  //定义一个空的对象
	websocketStore.data = ""//存放接收到数据
	websocketStore.ws = "" //存储ws
	// 初始化建立连接
	websocketStore.initWebsocket = () => {
    	websocketStore.ws = new WebSocket("ws://xxx.xxx.x.xxx:9090");
    	websocketStore.ws.onopen = function (event) {
        	console.log("open...------------------------------------------");
        	console.log(event);
        	let a = {
            	"op": "subscribe"
        	}
        	websocketStore.ws.send(JSON.stringify(a))
    	};

    	websocketStore.ws.onmessage = (e) => {
        	console.log("message===============")
        	let data = e.data
        	data = JSON.parse(data)
        	websocketStore.data = data
    	}
    	websocketStore.ws.onerror = function (event) {
        	console.log("建立连接--失败");
        	//关闭连接
        	websocketStore.ws.close();
    	};
	}
	//发送消息并接受(这里是如果有多个消息需要发送才去定义的一个方法)
	websocketStore.sendMsg = (e) => {
    	websocketStore.ws.send(e)
    	websocketStore.ws.onmessage = (e) => {
        	console.log("message...");
        	console.log(e)
    	}
	}
	//断开连接(如果需要在某个实际情况下需要手动断开连接,比如页面销毁,页面关闭等需要去触发一次点开连接定义的方法)
	websocketStore.handleOff = () => {
    	websocketStore.ws.close();
    	console.log("close-=-=--=-=-=-=-=-=")
    	websocketStore.data=""
	}
	export default websocketStore;
2.在index.vue中将webswocket.js注册到window中

即在项目最开始初始化的时候注册
1.在script中引入websocket

import websocketStore from '../utils/websocket';

2.在index.vue的created中写下如下代码

created() {
  window.websocketStore = websocketStore;
},
3.使用websocket

在需要使用websocket的.vue页面使用,代码如下

//点击按钮连接
connectLine(){
	window.websocketStore.initWebsocket(); //建立websocket连接并发送消息,initWebsocket方法在websocket.js文件中定义,可以根据自己的需求进行修改
	let data = window.websocket.data // data为websocket中请求回来返回的data
}
//手动断开连接
turnOffLine(){
	window.websocketStore.handleOff()
}

注意:
服务端如果在建立连接后轮询发消息,那么在websocket.js中onmessage方法中可以打印出轮询的消息,如果需要在页面中使用,可以在.vue页面中使用定时器轮询拿onmessage存储的消息,或者直接在.vue页面中使用websocket,无需再声明一个js文件。如何使用,根据你的情况而定。

### 封装 WebSocket 实现 Vue.js 中的通信 #### 1. 初始化 WebSocket 集成至项目 为了使 WebSocket 功能能够被整个应用访问,可以在项目的公共工具目录下创建 `ws.js` 文件用于封装 WebSocket 的基本操作。对于带有登录功能的应用程序而言,在主要页面如 `Home.vue` 组件内完成初始化工作是一个不错的选择。 ```javascript // @/utils/ws.js import { useWebSocketStore } from '@/stores/webSocket'; export function initWebSocket() { const store = useWebSocketStore(); store.connect('ws://your-websocket-url'); } ``` 在 Home.vue 或者其他合适的全局生命周期钩子中调用此函数可以确保当用户进入首页或者其他指定位置时自动建立 WebSocket 连接[^1]。 #### 2. 发送消息与接收响应处理 为了让各个组件都能轻松发送 WebSockets 请求以及监听服务器返回的数据,还需要定义一个通用的消息发送接口 `sendWebsocket()` 和相应的回调机制。这通常意味着要在目标组件内部注册事件处理器以便于捕获到来的信息: ```javascript // @/utils/ws.js 添加如下方法 export function sendWebsocket(callback) { const store = useWebSocketStore(); if (store.socket.readyState === WebSocket.OPEN) { // 假设这里实现了具体的发送逻辑... callback({ message: "模拟收到的消息" }); } } // 在需要使用的组件里像这样使用它: created () { sendWebsocket(this.onWebSocketMessage); }, methods: { onWebSocketMessage(data) { console.log(`Received data: ${data.message}`); } } ``` 通过这种方式,任何希望参与实时通讯的部分都可以简单地导入这两个辅助函数按照需求执行相应动作。 #### 3. 处理异常情况下的重新连接 考虑到网络波动可能导致意外断开的情况,应该考虑加入重试机制以维持稳定的服务质量。利用状态管理库比如 Pinia 来保存当前连接的状态,在其基础上构建一套完善的错误恢复流程显得尤为重要。 ```javascript // main.js 应用入口处配置 Store 及其行为 const webSocketStore = useWebSocketStore(); webSocketStore.connect('ws://localhost:8080'); if (!navigator.onLine || webSocketStore.status !== 'connected') { window.addEventListener('online', () => setTimeout(() => webSocketStore.reconnect(), 500)); } ``` 上述代码片段展示了如何检测离线状态在恢复在线后尝试再次连接 WebSocket[^2]。 #### 错误报告 除了正常的交互外,还应当关注可能出现的问题向开发者提供有用的反馈信息。例如设置专门针对 WebSocket 错误事件的侦听器可以帮助快速定位故障原因。 ```javascript // ws.js 内部增加错误捕捉部分 websock.onerror = function () { console.error('WebSocket connection error occurred.'); }; ``` 这样做不仅有助于调试期间发现问题所在,也能让用户界面更加友好地应对突发状况[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值