17370845950

新闻动态

使用JS实现一个简单的WebSocket客户端_javascript网络

WebSocket 可实现全双工通信，适合实时应用。通过 new WebSocket() 创建连接，监听 open、message、error、close 事件处理状态，使用 send() 发送数据，close() 关闭连接。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，相比传统的 HTTP 轮询，它能实现服务器主动向客户端推送消息，非常适合实时应用，比如聊天室、通知系统等。使用 JavaScript 实现一个简单的 WebSocket 客户端非常直接，下面是一个基础但完整的实现示例。

要连接到 WebSocket 服务端，只需实例化一个 WebSocket 对象，并传入服务端的 URL（以 ws:// 或 wss:// 开头）。

var socket = new WebSocket("ws://localhost:8080");

连接建立后，会触发一系列事件，我们可以通过监听这些事件来处理通信过程中的不同状态。

WebSocket 提供了四个主要事件：open、message、error 和 close。我们可以为它们绑定回调函数。

连接成功时触发 open 事件：

socket.onopen = function(event) { console.log("WebSocket 连接已建立"); // 可以在这里发送初始化消息 socket.send("Hello Server!"); };

接收服务器消息时触发 message 事件：

socket.onmessage = function(event) { console.log("收到消息:", event.data); // 处理来自服务器的数据 };

发生错误时触发 error 事件：

socket.onerror = function(event) { console.error("WebSocket 错误:", event); };

连接关闭时触发 close 事件：

socket.onclose = function(event) { console.log("连接已关闭", event); };

通过 send() 方法可以向服务器发送数据，支持字符串、Blob 或 ArrayBuffer。

// 发送文本消息 socket.send("这是一条客户端消息"); // 发送 JSON 数据 var data = { type: "chat", content: "你好" }; socket.send(JSON.stringify(data));

如果需要手动关闭连接，调用 close() 方法：

socket.close();

这个客户端可以在网页中运行，只要后端有一个 WebSocket 服务在指定地址监听即可。例如使用 Node.js 的 ws 库或 Java 的 WebSocket 实现。

基本上就这些。不复杂但容易忽略的是连接状态检查和重连机制，在实际项目中建议加入自动重连逻辑和状态判断（如只有在 OPEN 状态才允许 send）。