WebSocket connection failed 如何解决

WebSocket 连接失败可能是由于多种原因引起的。本文将提供简单易懂的解决方法,帮助你快速恢复连接。

用 Apifox,节省研发团队的每一分钟

WebSocket connection failed 如何解决

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

WebSocket

WebSocket connection failed 如何解决
WebSocket

WebSocket 是一种用于在 Web 应用程序中进行实时双向通信的技术。WebSocket 协议允许客户端和服务器在一个 TCP 连接上进行交换数据。这使得在 Web 上实现实时通信变得更容易。

使用 WebSocket,客户端和服务器之间可以双向通信,因此服务器可以主动向客户端发送更新,而不需要等待客户端请求。这与传统的 HTTP 请求-响应模型非常不同,因为在 HTTP 中,客户端必须发送请求以获取更新。

WebSocket 是 HTML5 的一部分,并由 W3C 规范管理。现代 Web 浏览器通常支持 WebSocket 技术,包括 Chrome,Firefox,Safari 和 Edge。常见的使用 WebSocket 的应用程序包括聊天应用程序,实时协作工具以及在线游戏。

WebSocket connection failed 如何解决

WebSocket connection failed 如何解决
报错信息

'WebSocket connection failed' 通常表示 Nginx 服务器的 WebSocket 配置有问题

正确配置 Nginx 服务器以支持 WebSocket 可以解决此问题。

WebSocket connection failed 如何解决
  • 第一步:检查 Nginx 的版本是否支持 WebSocket。如果你的版本是 1.3 或更高版本,则支持 WebSocket。
  • 第二步:编辑你的Nginx配置文件。你应该在nginx.conf文件的server块中找到以下一行配置。
location / {
    # ...
}

第三步:添加以下配置行以启用 WebSocket 支持:

  • proxy_pass 向代理服务器发送 WebSocket 流量(upstream 为目标网址)
  • proxy_http_version 将请求协议版本设置为1.1
  • Upgrade 头的值设置为 $http_upgrade,该值为所有带有 'Upgrade' 标题的请求头
  • Connection 头的值设置为 'upgrade',以指示连接已经成功升级
location / {
    proxy_pass http: //your_upstream;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}
  • 第四步:保存并退出配置文件,并重新启动Nginx服务,以便使更改生效。
  • 第五步:确认你已正确配置 Nginx WebSocket 设置。可以使用以下命令检查 Nginx 是否已配置为支持 WebSocket。
$ nginx -t
  • 第六步:如果命令显示 “OK”,则 WebSocket 已正确配置。如果命令显示错误,请检查并修复你的配置文件。

Apifox 调试 WebSocket 服务

如果你正在编写 WebSocket 服务并需要进行调试,我建议你使用一些很棒的 API 调试工具,如 Apifox,这款工具可以完美调试 WebSocket 服务~

谷歌插件

Apifox 有 Web端 和 客户端,如果你使用的是 Web端,想要调试本地服务,需要安装 Apifox 的 谷歌插件。

下载地址:Apifox 谷歌浏览器插件

WebSocket connection failed 如何解决
Apifox 谷歌浏览器插件

新建 WebSocket 请求

WebSocket 是客户端和服务端之间的长链接,因此你需要在 Apifox 中创建一个 WebSocket 请求,以便跳转到 Apifox 界面并填写相应的请求信息。

点击创建按钮并填入 WebSocket 服务的地址。你可以选择填写 Message 和 Params~

WebSocket connection failed 如何解决
新建 WebSocket 请求

Message 和 Params

Message

在 Message 中,你可以填写要传递到服务端的信息。服务端将接收你发送的信息。

WebSocket connection failed 如何解决
Message

Params

在传输过程中,你也可以携带参数,可以通过在地址上添加查询参数完成,可以携带的数据类型包括:string、integer、number、array。

WebSocket connection failed 如何解决
Params

保存请求

写完所需信息之后,可以点击 保存按钮,进行保存,方便下次可继续调用。

WebSocket connection failed 如何解决
保存请求

连接、发送 WebSocket 请求

连接 WebSocket 服务

我们想要跟服务端进行 WebSocket 通信,就需要先建立一个 WebSocket 连接,我们只需要点击连接。连接成功之后,会有成功的提示。服务端那边也会因为连接成功,而做出响应。

WebSocket connection failed 如何解决
连接 WebSocket 服务

发送 WebSocket 请求

接着我们就可以跟服务端进行 WebSocket 通信了。可以使用 Apifox 点击发送按钮向服务端进行发送 Message、Params。

WebSocket connection failed 如何解决
发送 WebSocket 请求

与 WebSocket 服务通信

发送之后,服务端也可以向客户端发送信息,例如我这里,我设置服务端每秒向客户端发送当时的时间戳~

WebSocket connection failed 如何解决
与 WebSocket 服务通信

与 WebSocket 断开连接

如何不想连接了,可以点击断开按钮。

WebSocket connection failed 如何解决
点击断开

即可断开连接

WebSocket connection failed 如何解决
成功断开