webSocket 通信详解

1. 引言

在现代 Web 开发中，实时通信已成为许多应用的核心需求。传统的 HTTP 协议基于请求-响应模式，无法满足实时数据推送的需求。WebSocket 协议应运而生，它为客户端和服务器之间提供了全双工、双向的通信通道，使得实时通信变得更加高效和简单。websocket在爱客司云餐厅后台管理、进销存后台管理、saas租户管理都有用到。

2. WebSocket 概述

2.1 WebSocket 的工作原理

WebSocket 是一种基于 TCP 的协议，允许在客户端与服务器之间建立持久化的双向连接。其工作原理可以概括为以下几个步骤：

复制代码

握手：客户端向服务器发送 WebSocket 握手请求，服务器返回响应以确认连接。
建立连接：一旦握手成功，客户端和服务器之间的连接将保持打开状态，双方可以随时发送和接收消息。
数据传输：数据以帧的形式在客户端和服务器之间传递，支持文本和二进制格式。
关闭连接：连接可以由任一方主动关闭。
协议特点
	持久连接：一旦建立，连接保持打开状态
	低延迟：无需重复建立连接
	双向通信：客户端和服务器都可以主动发送消息
	轻量级：数据帧头部开销小（仅 2-10 字节）

2.2 WebSocket 与 HTTP 的区别

3. 实现 WebSocket 通信

3.1 创建 WebSocket 实例

bash 复制代码

let websocket = new WebSocket('wss://api.example.com');

3.2 连接 WebSocket 服务器

bash 复制代码

websocket.onopen = () => {
  console.log('服务已连接');
};

websocket.onerror = (error) => {
  console.error('连接出错:', error);
};

websocket.onclose = () => {
  console.log('服务连接关闭');
};

3.3 发送和接收消息

bash 复制代码

// 发送消息
websocket.send(JSON.stringify({ type: 'message', content: 'Hello' }));

// 接收消息
websocket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('接收消息:', message);
};

3.4 使用vueuse/core插件

bash 复制代码

#1.引入 vueuse/core
npm i -D @vueuse/nuxt @vueuse/core

#2.引入 websocket
import { useWebSocket } from '@vueuse/core';
#3. 使用
const websocket = useWebSocket('wss://api.example.com', {
	onConnected: () => {
		console.log('WebSocket 连接成功');
	},
	onError: error => {
		console.error('连接出错:', error);
	},
	onMessage: message => {
		message.onmessage = async (event) => {
			const message = JSON.parse(event.data);
			console.log('接收消息:', message );
		};
	},
	onDisconnected: () => {
		console.log('WebSocket 连接断开');
	},
	autoReconnect: {
		retries: 10,
		delay: 0,
		onFailed: () => {
			console.log('websocket 重连失败');
		}
	}
});

4. 注意事项

心跳机制

心跳机制是 WebSocket 应用中确保连接可靠性的关键技术。

bash 复制代码

setInterval(() => {
	websocket.send(JSON.stringify({ type: 'ping' }));
}, 10000);

5. 总结

WebSocket 为现代 Web 应用提供了强大的实时通信能力，正确使用 WebSocket 可以显著提升用户体验和系统性能。

5.1 核心优势

实时性：支持真正的实时双向通信

效率高：头部开销小，连接持久

灵活性：支持文本和二进制数据

5.2 适用场景推荐

1、实时聊天应用

2、实时数据监控