如何判断WebSocket是否连接成功

halo1416

已于 2025-03-21 10:16:36 修改

阅读量1.4w

点赞数 5

分类专栏： JavaScript 文章标签： websocket 连接状态

于 2021-11-23 17:06:59 首次发布

本文链接：https://blog.csdn.net/halo1416/article/details/121497578

版权

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文档介绍了如何使用WebSocket进行连接验证，通过检查Socket.readyState状态为1来判断连接是否成功。作者提供了一段简单的JavaScript代码示例，展示了如何创建WebSocket连接，并在连接成功时触发onopen事件。此外，还强调了此文章适用于WebSocket学习者，作为快速验证连接是否成功的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言：

该文章基于原生WebSocket而编写的基础文章，大佬请绕过！！！

二、判断是否连接成功

判断依据：Socket.readyState （即状态为1就代表可以连接成功）

值	状态
0	连接尚未建立
1	连接已建立，可以进行通信
2	连接正在进行关闭
3	连接已经关闭或者连接不能打开

在浏览器的控制台输入new WebSocket(地址)

连接成功
连接不成功

在我们正式写 websocket 前，在浏览器里面快速的验证一下是否可以连接成功，还是很方便的！

如果我们在项目中已经写好了 websocket

const token = this.$store.getters.access_token
let url = `${this.$webSocketUrl}/cc/websocket/status/${ token }`;
this.socket = new WebSocket(url);
this.socket.onmessage = (res => {
  console.log('消息数据已接收...', JSON.parse(res.data));
  if (JSON.parse(res.data).code === 1) {
    // 刷新统计数据
    this.getCountList();
  }
});
this.socket.onopen = (res => {
  // 这里面可以查看是否连接成功
  console.log('消息socket连接成功', res);
});

在这里插入图片描述

三、扩展

ps：wss 在 https 环境下，并且没有 SSL/TLS 证书 的情况下，浏览器是链接不上的，接口都无法到达服务器，直接被浏览器阻止了。但是，在 Apifox 或者 Postman 这类工具中，是可以链接成功的，因为这类工具可以配置是否开启 SSL 证书验证，只要没开启这个验证就能链接成功！

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！