「IM系列」WebSocket教程:WS和WSS域名访问配置

2023-12-19 17:11:57 浏览数 (2)

WebSocket协议与HTTP协议不同,但WebSocket握手与HTTP兼容,使用HTTP升级工具将连接从HTTP升级到WebSocket。这允许WebSocket应用程序更容易地适应现有的基础设施。例如,WebSocket应用程序可以使用标准HTTP端口80和443,从而允许使用现有的防火墙规则。

准备

  • 已经安装nginx
  • 假设Websocket协议监听的是8282端口
  • 已经申请了证书(pem/crt文件及key文件)假设放在了/etc/nginx/conf.d/ssl
  • 利用nginx开启443端口对外提供wss代理服务
  • Nginx一般作为网站服务器运行着其它服务,为了不影响原来的站点使用,这里使用地址域名.com/wss 作为wss的代理入口。也就是客户端连接地址为 wss://域名.com/wss

配置

WS域名配置

NGINX通过允许在客户端和后端服务器之间建立隧道来支持WebSocket。对于NGINX从客户端向后端服务器发送升级请求,必须显式设置 Upgrade 和 Connection 头,如本例所示:

代码语言:javascript复制
location /ws/ {
    proxy_pass http://wsbackend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

完成后,NGINX将其作为WebSocket连接处理。

代码语言:javascript复制
http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }
 
    upstream websocket {
        server 192.168.100.10:8010;
        server 192.168.100.11:8010;
        server 192.168.100.12:8010;
    }
 
    server {
        listen 80;
        server_name api.tinywan.com;
        location / {
            proxy_pass http://websocket;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header Host $host;
        }
    }
}

console测试

代码语言:javascript复制
ws = new WebSocket("ws://api.tinywan.com");

ws.onopen = function() {
    alert("连接成功");
    ws.send('Tinywan');
    alert("给服务端发送一个字符串:tom");
};
ws.onmessage = function(e) {
    alert("收到服务端的消息:"   e.data);
};
WSS域名配置

WSS 是 Web Socket Secure 的简称,它是 WebSocket 的加密版本。WebSocket 中的数据是不加密的,但是不加密的数据很容易被别有用心的人窃取, 因此为了保护数据安全,将 WebSocket 与 SSL 结合,实现了安全的 WebSocket 通信,即 WebSocket Secure。

WebSocket协议定义了WebSocket(WS://)以及WebSocket安全(WSS://)两种前缀,WebSocket使用HTTP握手然后升级为WebSocket协议进行通信,WebSocket安全(WSS)使用HTTPS握手然后升级为安全的WebSocket协议,WSS其实就是WS TLS。所以只需要在websocket协议的基础上开启SSL即可支持wss协议。

代码语言:javascript复制
server {
  listen 443;
  server_name api.tinywan.com;

  ssl on;
  ssl_certificate /etc/ssl/server.pem;
  ssl_certificate_key /etc/ssl/server.key;
  ssl_session_timeout 5m;
  ssl_session_cache shared:SSL:50m;
  ssl_protocols SSLv3 SSLv2 TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers ALL:!ADH:!EXPORT56:RC4 RSA: HIGH: MEDIUM: LOW: SSLv2: EXP;

  location /wss
  {
    proxy_pass http://127.0.0.1:8282;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Real-IP $remote_addr;
  }

  # location / {} 站点的其它配置...
}

console测试

代码语言:javascript复制
ws = new WebSocket("wss://api.tinywan.com/wss");

ws.onopen = function() {
    alert("连接成功");
    ws.send('Tinywan');
    alert("给服务端发送一个字符串:tom");
};
ws.onmessage = function(e) {
    alert("收到服务端的消息:"   e.data);
};

0 人点赞