javascript如何实现websocket_如何建立连接-js教程-PHP中文网

javascript如何实现websocket_如何建立连接

夢幻星辰

发布： 2025-12-17 21:19:02

原创

949人浏览过

JavaScript中建立WebSocket连接需用new WebSocket(url)创建实例，正确处理onopen、onmessage、onerror、onclose事件，并在readyState为OPEN时调用send()发送数据，关闭时用close()。

javascript如何实现websocket_如何建立连接

JavaScript 中建立 WebSocket 连接很简单，核心就是用 new WebSocket(url) 创建实例，关键在于正确处理连接状态和错误。

创建 WebSocket 实例

只需传入 ws:// 或 wss:// 开头的服务端地址：

const ws = new WebSocket("ws://localhost:8080");（开发常用）
const ws = new WebSocket("wss://api.example.com/chat");（生产环境推荐，走加密通道）

注意：协议必须匹配服务端配置，不能用 http:// 或 https://，否则会报错。

监听连接状态事件

WebSocket 是事件驱动的，主要靠这四个事件控制流程：

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

ws.onopen：连接成功后触发，可以在这里发初始化消息
ws.onmessage：收到服务器消息时触发，event.data 就是内容
ws.onerror：发生网络或协议错误时触发（比如跨域、地址不可达）
ws.onclose：连接关闭时触发，event.code 和 event.reason 可查原因

建议在 onerror 里至少打个日志，不然失败了也不知哪出问题。

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

查看详情

发送与关闭连接

连接打开后才能安全发送数据：

ws.send("hello server"); —— 只能发字符串、ArrayBuffer、Blob、TypedArray
ws.close(); —— 主动断开，可选传入状态码和原因：ws.close(1000, "user logout")

如果 ws.readyState 不是 1（OPEN），调 send() 会直接报错。发之前建议判断：if (ws.readyState === WebSocket.OPEN) ws.send(...);

简单完整示例

把上面串起来，一个最小可用片段：

const ws = new WebSocket("wss://echo.websocket.org"); // 公共测试地址

ws.onopen = () => console.log("已连接");
ws.onmessage = event => console.log("收到：", event.data);
ws.onerror = err => console.error("连接出错", err);
ws.onclose = event => console.log("已断开", event.code, event.reason);

// 3秒后发条消息（确保连接已建立）
setTimeout(() => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send("test message");
  }
}, 3000);

登录后复制

基本上就这些。不复杂但容易忽略状态判断和错误处理，补上就稳了。

以上就是javascript如何实现websocket_如何建立连接的详细内容，更多请关注php中文网其它相关文章！