使用JavaScript实现一个简单的WebSocket客户端_javascript网络-js教程-PHP中文网

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

狼影

发布： 2025-11-07 13:08:02

原创

699人浏览过

使用原生 WebSocket API 可创建与服务器全双工通信的客户端，通过 new WebSocket('ws://localhost:8080') 建立连接，监听 open、message、error、close 事件处理连接状态与数据收发，调用 send() 方法发送字符串或 JSON 数据，现代浏览器无需额外依赖即可运行。

使用javascript实现一个简单的websocket客户端_javascript网络

要实现一个简单的 WebSocket 客户端，只需要使用浏览器原生提供的 WebSocket API。它允许你与支持 WebSocket 协议的服务器进行全双工通信。下面是一个简洁、实用的实现示例。

创建 WebSocket 连接

使用 new WebSocket(url) 可以创建一个连接到指定地址的客户端。URL 通常以 ws://（非加密）或 wss://（加密）开头。

const socket = new WebSocket('ws://localhost:8080');

登录后复制

监听连接事件

WebSocket 提供了几个关键的事件回调，用于处理连接状态和数据收发。

1. 连接成功

立即学习“Java免费学习笔记（深入）”；

socket.addEventListener('open', function (event) {
  console.log('连接已建立');
  socket.send('你好，服务器！');
});

登录后复制

2. 接收消息

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

socket.addEventListener('message', function (event) {
  console.log('收到消息:', event.data);
});

登录后复制

3. 处理错误

socket.addEventListener('error', function (event) {
  console.error('发生错误:', event);
});

登录后复制

4. 连接关闭

socket.addEventListener('close', function (event) {
  console.log('连接已关闭');
});

登录后复制

发送消息

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

// 发送文本
socket.send('这是一条测试消息');

// 发送 JSON 数据
const data = { type: 'chat', message: 'Hello' };
socket.send(JSON.stringify(data));

登录后复制

完整示例代码

// 创建 WebSocket 实例
const socket = new WebSocket('ws://localhost:8080');

// 连接打开时
socket.addEventListener('open', (event) => {
  console.log('✅ 连接到服务器');
  socket.send('客户端已上线');
});

// 监听来自服务器的消息
socket.addEventListener('message', (event) => {
  console.log('? 收到:', event.data);
});

// 监听错误
socket.addEventListener('error', (event) => {
  console.error('❌ 连接出错');
});

// 监听连接关闭
socket.addEventListener('close', (event) => {
  console.log('⏹️ 连接已断开');
});
</font>

登录后复制

基本上就这些。只要服务器支持 WebSocket，这个客户端就能运行在现代浏览器中，无需额外依赖。注意确保服务端正在监听指定端口，并正确处理 WebSocket 握手协议。

以上就是使用JavaScript实现一个简单的WebSocket客户端_javascript网络的详细内容，更多请关注php中文网其它相关文章！