HTTPS 下使用WebSocket的一些实践

问题描述:

HTTPS 下发起WS连接,连接失败,Chrom 浏览器报错。

 socket.js:19 Mixed Content: The page at 'https://app.XXX.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://172.16.10.80:9035/websocket/416377519315353600'. This request has been blocked; this endpoint must be available over WSS.

问题排查:

HTTPS 连接下浏览器不允许WS协议,只允许WSS协议

问题解决:

(1)确定后端接口提供ws 能力

WS 在线测试工具:http://wstool.jackxiang.com/

  • ws://172.16.10.80:9035/websocket/

HTTPS 下使用WebSocket的一些实践

确定接口能提供ws 的能力

(2)、nginx 配置websocket代理【客户端不直连websocket接口】

#全局配置
.............
map $http_upgrade $connection_upgrade {
      default upgrade;
      '' close;
    }

.....................

server  {
        listen 443 ssl;
        server_name app.XXX.com;
        ssl_certificate /home/application/nginx/cert/XXX.com/XXX.com.crt;
        ssl_certificate_key /home/application/nginx/cert/XXX.com/XXX.link.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
        gzip_buffers 4 16k;


location ^~/websocket {
   rewrite ^/websocket/(.*)$ /$1 break;
   proxy_pass http://172.16.10.80:9035;
   proxy_read_timeout 300s;
   proxy_send_timeout 300s;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection  $connection_upgrade;
}

...................

}
  • rewrite 地址重写
  • proxt_http_version 1.1 表示反向代理发送的HTTP协议的版本是1.1,HTTP1.1支持长连接
  • proxy_pass http://172.16.10.80:9035 表示反向代理的uri, 如果多个地址可使用负载均衡变量表示
  • proxy_set_header Host 表 示 传 递 时 请 求 头 不 变 ,

    h o s t ; 表 示 传 递 时 请 求 头 不 变 ,

    host是nginx内置变量,表示的是当前的请求头,proxy_set_header表示设置请求头

  • proxy_set_header X-Real-IP $remote_addr; 表示传递时来源的ip还是现在的客户端的ip
  • proxy_read_timeout 300s; 表示两次请求之间的间隔超过 300s 后才关闭这个连接,默认的60s,自动关闭的元凶
  • proxy_send_timeout 300s; 指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间,而是在两次write操作期间。如果超时后,upstream没有收到 新的数据,Nginx会关闭连接,默认的60s
  • proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 表示X-Forwarded-For头不发生改变
  • proxy_set_header Upgrade $http_upgrade; 表示设置Upgrade不变
  • proxy_set_header Connection 表 示 如 果

    c o n n e c t i o n u p g r a d e ; 表 示 如 果

    http_upgrade为upgrade,则请求为upgrade(websocket),如果不是,就关闭连接

(3)、前端代码改造,区分ws 还是 WSS

  • 因我们的站点支持HTTP 和 HTTPS 双协议栈网站访问,使用同一套前端代码,因此就需要前端同学 在代理中加入判断,当我访问的是HTTP 站点的时候,走WS 协议,同理 当我访问的是HTTPS 站点的时候,走WSS 协议
  • 大致JS代码如下:

HTTPS 下使用WebSocket的一些实践

访问测试:

HTTPS 下使用WebSocket的一些实践

参考:

文章来源:https://www.cnaaa.net,转载请注明出处:https://www.cnaaa.net/archives/6768

(0)
卡萨丁, 卡莎的头像卡萨丁, 卡莎
上一篇 2023年1月20日 下午2:50
下一篇 2023年1月20日 下午2:50

相关推荐

  • CentOS 修改 SSH无操作自动断开时长及连接超时

    CentOS 修改 SSH无操作自动断开时长 当 SSH 连接到 CentOS 服务器时, 如果一段时间不操作, SSH 会自动断开。 这时, 可修改配置增加连接时长。 一、修改配置 在配置中找到 修改为 ClientAliveInterval 指定了服务器端向客户端发送消息的间隔,默认 0 不发送消息。ClientAliveInterval 30…

    2023年2月20日
    1.5K00
  • linux之运维性能命令

    在 Linux 系统中,有许多命令和工具可以帮助运维人员监控系统状态、性能以及定位问题。以下是一些常用的运维相关命令: top: 如前所述,实时显示进程的资源占用情况。 htop: 类似于 top,但提供了一个更为用户友好的界面,支持颜色显示和滚动。 vmstat: 报告有关系统进程、内存、分页、块 IO、陷阱和 CPU 活动的信息。 iostat: 用于监…

    2024年7月3日
    88900
  • 利用Nextcloud搭建企业私有云盘系统

    1. 场景介绍 Nextcloud是一款免费开源的私有云存储系统,采用PHP+MySQL开发,提供了多个同步客户端支持多种设备访问,使用Nextcloud可以快速便捷地搭建一套属于自己或企业的云同步云盘,从而实现跨平台跨设备文件同步编辑、共享、版本控制、团队协作等功能。   不同于公有云盘,私有云盘需要部署在自己的服务器上(物理机或者云主机),并通过公网进行…

    2023年12月5日
    62100
  • 如何在 Ubuntu 22.04 上启用 BBR?

    由于购买的VPS或者主机数据中心都在国外,经常会发生网络拥堵的情况,我们可以通过启用BBR来优化。 在Ubuntu系统上启用BBR可以提升网络连接速度,优化网络拥堵情况。 BBR代表瓶颈带宽,RTT是拥塞控制系统。 您可以在 Linux 桌面上启用 TCP BBR 以改善整体网上冲浪体验。 默认情况下,Linux 使用 Reno 和 CUBIC 拥塞控制算法…

    2024年3月12日
    78900
  • Centos7下FTP安装与配置

    一、前述 企业中linux搭建ftp服务器还是很实用的,所以本文基于Centos7搭建服务器教程做个总结。 FTP协议占用两个端口号: 21端口:命令控制,用于接收客户端执行的FTP命令。 20端口:数据传输,用于上传、下载文件数据。 二、服务端安装 1.安装vsftpd yum -y install vsftpd 2.配置vsftp vim /etc/vs…

    2022年6月15日
    70900

在线咨询: QQ交谈

邮件:712342017@qq.com

工作时间:周一至周五,8:30-17:30,节假日休息

关注微信