websocket报错集锦-不断更新中

问题1：Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

问题描述

Mixed Content: The page at 'https://AAAAAA.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://10.100.100.100:30000/'. This request has been blocked; this endpoint must be available over WSS.
index.1ea3d99d.js:4 DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

问题分析

• HTTPS基于SSL依靠证书验证服务器身份，进行通信加密，我们的域名是https.所以非SSL验证的资源时浏览器可能会阻止。
• ws://调用websocket服务器或者请求http://*都会报错

问题解决

• 方案一：在前端将：ws:// 修改为：wss://，所有http改为https的资源
• 方案二：配置nginx代理

server
{listen 80;listen 443 ssl;server_name 域名;ssl on;ssl_certificate 证书.crt;ssl_certificate_key 证书.key;ssl_session_timeout 5m;ssl_session_cache shared:SSL:50m;ssl_protocols SSLv3 SSLv2 TLSv1 TLSv1.1 TLSv1.2; # 按此协议配置ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_prefer_server_ciphers on;location /wss/  {   proxy_pass http://127.0.0.1:82/;        # 指向部署websocket的项目proxy_http_version 1.1;    proxy_set_header Upgrade $http_upgrade;    proxy_set_header Connection "Upgrade";    proxy_set_header X-real-ip $remote_addr;proxy_set_header X-Forwarded-For $remote_addr;}
}

问题2：34. ws.9341e94c.js:1 Uncaught DOMException: Failed to execute ‘send’ on ‘WebSocket’: Still in CONNECTING state.

问题描述

 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

问题分析

webscoket连接标志有四个值，分别对应不同的状态，如下：

• WebSocket.CONNECTING：值为0，表示正在连接；
• WebSocket.OPEN：值为1，表示连接成功，可以通信了；
• WebSocket.CLOSING：值为2，表示连接正在关闭；
• WebSocket.CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
  这个错误原因：WebSocket处在正在连接的状态（CONNECTING），其实还没有连接成功，然后调用者又调用了send方法发送，所以still in connecting

问题解决

• 在websocket open函数里面执行send方法

ws.onopen = () => {
ws.send('i am xiaojin');
}

• 判断websocket链接状态，再进行发送

if (ws.readyState===1) {ws.send()
}

今天就写到这里啦~

• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~