前言
- 微信小程序支持使用 WebSocket 連接到服務(wù)器齐蔽，準(zhǔn)確地說(shuō)是帶 SSL 的 WebSocket杠巡，而微信小程序中不允許使用帶端口的 wss 連接，只能使用 443 端口埃撵。想使用其他端口就需要在服務(wù)器做一層代理尸诽，本文以 Ubuntu 16.04 服務(wù)器為例，使用 nginx 做 Web Server 盯另。本文參考了 如何在微信小程序的websocket上使用mqtt協(xié)議 性含，在此感謝原作者。
步驟
- 安裝 nginx 及配置的過(guò)程不再贅述鸳惯，nginx 需要處理微信小程序 WebSocket 不支持 Sec-WebSocket-Protocol 頭的問(wèn)題商蕴，默認(rèn) nginx 不帶這個(gè)功能，需要加上補(bǔ)丁
headers-more-nginx-module 后重新編譯芝发。Ubuntu 16.04 的 nginx 版本為 1.10.3 绪商。
wget https://nginx.org/download/nginx-1.10.3.tar.gz
tar zxvf nginx-1.10.3.tar.gz
git clone https://github.com/openresty/headers-more-nginx-module.git
cp -r headers-more-nginx-module nginx-1.10.3
cd nginx-1.10.3
./configure --with-cc-opt='-g -O2 -fPIE -fstack-protector-strong -Wformat -Werror=format-security -Wdate-time -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -fPIE -pie -Wl,-z,relro -Wl,-z,now' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-pcre-jit --with-ipv6 --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_v2_module --with-http_sub_module --with-http_xslt_module --with-stream --with-stream_ssl_module --with-mail --with-mail_ssl_module --with-threads --add-module=./headers-more-nginx-module
make
- 編譯完成后將系統(tǒng)的 /usr/sbin/nginx 替換為 objs 目錄中的 nginx 。
sudo service nginx stop
sudo cp /usr/sbin/nginx /usr/sbin/nginx.bak
sudo cp ./objs/nginx /usr/sbin
sudo service nginx start
- nginx 配置開(kāi)啟 443 端口及證書(shū)辅鲸，可在騰訊云獲取免費(fèi)的 TrustAsia SSL 證書(shū) 格郁，/etc/nginx/sites-available/default 部分配置如下
listen 80 default_server;
#listen [::]:80 default_server;
# SSL configuration
#
listen 443 ssl;
# listen [::]:443 ssl default_server;
ssl_certificate /etc/nginx/ssl/xxxxxxxx.crt;
ssl_certificate_key /etc/nginx/ssl/xxxxxxxx.key;
ssl_session_timeout 5m;
ssl_session_cache shared:SSL:50m;
ssl_protocols TLSV1.1 TLSV1.2 SSLv2 SSLv3;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
ssl_prefer_server_ciphers on;
- 用 Node.js 寫(xiě)了一個(gè)簡(jiǎn)易的 WebSocket 服務(wù)端，運(yùn)行在 8080 端口。
var WebSocket = require('ws');
var WS_PORT = 8080;
var ws_clients = [];
var WebSocketServer = new WebSocket.Server({ host: '127.0.0.1', port: WS_PORT });
console.log('開(kāi)始監(jiān)聽(tīng)Websocket端口：' + WS_PORT);
WebSocketServer.on('connection', function(wsConnect, req) {
ws_clients.push(wsConnect);
console.log('Websocket客戶端已連接：' + serial_number);
console.log('Websocket客戶端數(shù)量：' + ws_clients.length);
wsConnect.on('message', function (message) {
console.log('接收到消息：');
console.log(message);
});
wsConnect.on('close', function(code, message) {
ws_clients.splice(ws_clients.indexOf(wsConnect), 1);
console.log('Websocket客戶端已斷開(kāi)');
console.log('Websocket客戶端數(shù)量：' + ws_clients.length);
});
wsConnect.on('error', function(code, message) {
ws_clients.splice(ws_clients.indexOf(wsConnect), 1);
console.log('Websocket客戶端已斷開(kāi)');
console.log('Websocket客戶端數(shù)量：' + ws_clients.length);
});
});
- 在 /etc/nginx/sites-available/default 中添加一項(xiàng) location例书，將來(lái)自 443 端口 /wss 的 Websocket 連接代理至 8080 端口锣尉。即在小程序的 wx.connectSocket 的 url 中填 wss://服務(wù)器域名/wss 。
location /wss {
proxy_pass http://127.0.0.1:8080;
proxy_redirect off;
proxy_read_timeout 86400;
proxy_set_header Host xxx.xxx.xxx;
proxy_set_header Sec-WebSocket-Protocol wss;
more_clear_headers Sec-WebSocket-Protocol;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
- 不出問(wèn)題的話决采，小程序 WebSocket 即可連接到服務(wù)器的非 443 端口自沧，而原有的 Web 服務(wù)則不受影響。
