当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5WebSocket原理与代码实现详解

HTML5WebSocket原理与代码实现详解

2025-11-27 12:54:56 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《HTML5 WebSocket通信原理与实现代码》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

WebSocket基于TCP实现全双工通信，通过HTTP握手升级协议后进行持久化双向数据传输，适用于聊天、通知等高频交互场景；前端使用JavaScript的WebSocket API建立连接并监听事件，后端可用Node.js的ws库创建服务器；需注意代理配置、自动重连、JSON格式消息及安全认证等问题。

HTML5WebSocket怎么通信_HTML5WebSocket实现实时通信的原理与代码

HTML5 WebSocket 实现了客户端与服务器之间的全双工通信，允许数据在浏览器和服务器之间双向、实时地传输。相比传统的 HTTP 请求-响应模式，WebSocket 更适合需要高频交互的场景，比如聊天应用、实时通知、在线游戏等。

WebSocket 通信的基本原理

WebSocket 协议建立在 TCP 基础之上，通过一次 HTTP 握手升级连接，之后便脱离 HTTP，进入持久化的双向通信状态。

握手阶段：客户端发送一个带有特殊头信息的 HTTP 请求，请求升级为 WebSocket 协议。服务器确认后返回 101 状态码（切换协议），完成握手。

数据传输阶段：握手成功后，客户端和服务器可以随时互相发送数据，无需等待请求。数据以“帧”（frame）的形式传输，支持文本和二进制格式。

连接保持：连接一旦建立，会一直保持打开状态，直到某一方主动关闭或网络中断。这减少了频繁建立连接的开销。

前端 WebSocket 使用方法

在浏览器中使用 JavaScript 创建 WebSocket 连接非常简单，只需实例化 WebSocket 对象并监听事件。

示例代码：

// 创建 WebSocket 连接，假设服务端运行在 ws://localhost:8080
const socket = new WebSocket('ws://localhost:8080');

// 连接成功时触发
socket.onopen = function(event) {
    console.log('连接已建立');
    socket.send('你好，服务器！');
};

// 接收服务器消息
socket.onmessage = function(event) {
    console.log('收到消息：' + event.data);
};

// 处理错误
socket.onerror = function(event) {
    console.error('通信出错：', event);
};

// 连接关闭时触发
socket.onclose = function(event) {
    console.log('连接已关闭');
};

后端实现 WebSocket 服务（Node.js 示例）

使用 Node.js 和 ws 库可以快速搭建一个 WebSocket 服务。

安装依赖：

npm install ws

服务端代码：

const WebSocket = require('ws');

// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    console.log('客户端已连接');

    // 接收客户端消息
    ws.on('message', function(data) {
        console.log('收到：' + data);

        // 回 echo 消息
        ws.send('服务器收到：' + data);
    });

    // 连接关闭
    ws.on('close', function() {
        console.log('客户端断开连接');
    });
});

console.log('WebSocket 服务器运行在 ws://localhost:8080');