问题背景
在使用 Deno 开发前端应用过程中，有时会遇到 WebSocket 被浏览器过滤的问题。这种情况通常是由于浏览器针对 WebSocket 的安全策略造成的，而在 Deno 中也可能出现类似情况。
解决方案
要解决 Deno 中 WebSocket 被过滤的问题，可以采用以下几种方案：
方案一：修改浏览器的安全策略
1.打开控制台
在浏览器中，按下键盘上的 F12 键，或者右键菜单选择“检查”（Inspect），即可打开控制台。
2.切换到 Console 标签页
控制台通常有多个标签页，我们需要切换到 Console 标签页。
3.输入以下命令
在 Console 标签页中，输入以下命令，开启跨域 WebSocket 支持：
chrome.exe --disable-web-security --user-data-dir="D:/ChromeDevSession" --ignore-certificate-errors
其中，D:/ChromeDevSession 表示你指定的浏览器数据目录，可以自定义。
4.创建 WebSocket
使用 Deno 创建 WebSocket 时，可以将 host 和 port 分别设置为 localhost 和 3000：
const ws = new WebSocket("ws://localhost:3000");方案二：使用代理服务器
通过使用代理服务器可以解决 WebSocket 被过滤的问题。具体操作步骤如下：
1.安装 http-proxy-to-socket
在 Deno 中，可以安装一个名为 http-proxy-to-socket 的工具，在命令行中输入以下命令进行安装：
deno install -f -r -A --unstable https://deno.land/x/http_proxy_to_socket/cli.ts
其中，-f 表示强制覆盖已有的安装文件；-r 表示将工具添加到 PATH 环境变量中；-A 表示开启所有权限；--unstable 表示开启 unstable 模式，以支持使用正在实验中的功能。
2.启动代理服务器
使用以下命令启动代理服务器：
http_proxy_to_socket --bind :8080 --endpoint example.com:443
其中，--bind 表示代理服务器的绑定地址和端口；--endpoint 表示要代理的终端地址和端口。
3.创建 WebSocket
在 Deno 中使用 WebSocket 时，将 host 和 port 设置为代理服务器的地址和端口：
const ws = new WebSocket("ws://localhost:8080");示例代码
具体操作流程描述如上，以下是示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------------------------- -- -- --------- ----- -- - --- --------------------------------- -- -- --------- ---- --------- - -- -- - ---------------------- -------- -- -- -- --------- ---- ------------ - ------- -- - ---------------------------------- -- -- -- --------- ---- ---------- - -- -- - ---------------------- -------- -- -- -- --------- ---- ---------- - ------- -- - ------------------------ -------------- --
总结
WebSocket 被浏览器或 Deno 过滤的问题是常见的开发问题，解决方案也有多种。使用以上方案可以有效解决 WebSocket 被过滤的问题。但在实际开发中，我们也应该遵守安全规范，不滥用特权和漏洞，保障应用的安全性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646446f3968c7c53b0528526