首页 > 文章 > 前端

JS实现WebSocket客户端入门教程

时间：2025-10-31 17:14:27 152浏览收藏

想要实现实时通信？本文为你提供了一个简单易懂的JS WebSocket客户端教程。WebSocket协议通过单一TCP连接实现全双工通信，告别传统HTTP轮询，让服务器主动推送消息成为可能，广泛应用于聊天室、通知系统等实时场景。本文将详细介绍如何使用JavaScript轻松创建WebSocket连接，通过`new WebSocket()`实例化，监听`open`、`message`、`error`、`close`等关键事件，掌握`send()`发送数据和`close()`关闭连接的方法。更有完整示例代码，助你快速上手，打造高效的实时应用！

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

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

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

创建 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）。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。