是(shì)什麽

一種網絡通信協議（握手階段使用的(de)是(shì)http 1.1),如果需要(yào / yāo)服務端主動向客戶端推送信息可以(yǐ)使用它。

優勢

• 全雙工，服務端和(hé / huò)客戶端可以(yǐ)互通消息。

• 相對于(yú)各種論詢，不(bù)僅省掉多次握手消耗，節省帶寬資源，而(ér)且不(bù)用多次去詢問是(shì)否有新數據可消耗。

存在(zài)的(de)問題

• 需要(yào / yāo)服務端配合，學習成本高些

• 如果需要(yào / yāo)獲取新數據的(de)頻次少，一直保持鏈接的(de)話，浪費服務器資源。

使用方式(ps: 我使用的(de)是(shì)本地(dì / de)nginx,自己生成的(de)證書，密鑰）

技術方案：nodejs + nginx + 微信小程序

hosts文件配置：

127.0.0.1 localhost
127.0.0.1 www.test.com
 

服務端：

var express = require('express');
var ws = require('ws');
const http = require('http'); 
var server = http.createServer(express()); 

/**
 * 創建websocket服務
 */
const wss = new ws.createServer({ server, path: '/wss' }, ws => {
  serveMessage(ws);
});

/**
 * 監聽websocket服務錯誤
 */
wss.on('error', (err) => {
  console.log(err);
});

/**
 * 進行簡單的(de) WebSocket 服務，對于(yú)客戶端發來(lái)的(de)所有消息都回複回去
 */
function serveMessage(ws) {
  // 監聽客戶端發來(lái)的(de)消息
  ws.on('message', (message) => {
console.log(`WebSocket received: ${message}`);
ws.send(`Server: Received(${message})`);
  });

  // 監聽關閉事件
  ws.on('close', (code, message) => {
console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);
  });

  // 連接後馬上(shàng)發送成功響應
  ws.send(`Server: 收到(dào)我的(de)消息了(le／liǎo)嘛`);
}

server.listen(8888);

nginx配置(ps: 如果隻是(shì)調試的(de)話也(yě)可以(yǐ)使用80端口)：

server {
    server_name www.test.com;
    listen 443;
    ssl on;
    ssl_certificate      xxx.crt; # 證書
    ssl_certificate_key  yyy.key; # 密鑰，生成方式可自行搜索

    access_log   /usr/local/etc/nginx/access.log; # 記錄訪問日志
    error_log   /usr/local/etc/nginx/error.log; # 記錄錯誤日志

    proxy_read_timeout 10s; ＃設置超時(shí)時(shí)間，防止node服務就(jiù)是(shì)挂的(de)
    proxy_connect_timeout 5s; ＃設置超時(shí)時(shí)間，防止node服務就(jiù)是(shì)挂的(de)

    location /wss {
        proxy_pass http://localhost:8888;
        proxy_http_version 1.1; # 必需
        proxy_set_header Upgrade $http_upgrade; # 必需
        proxy_set_header Connection $connection_upgrade; # 必需
        proxy_set_header Host $host; # 非必需
        proxy_set_header X-Real-IP $remote_addr; # 非必需
        proxy_set_header X-Real-Port $remote_port; # 非必需
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 非必需
        proxy_set_header X-Forwarded-Protocol "$scheme"; # 非必需
    }
    
    location / {
        proxy_pass http://localhost:999;
        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_set_header X-Forwarded-Protocol $scheme;
        }
}

小程序客戶端(ps: 具體使用語法可以(yǐ)查看mp.weixin.qq.com官方小程序文檔)：

wx.connectSocket({
  url: 'wss://www.test.com/wss',
  data: {
    message: 'test'
  },
  success: function (res) {
    console.log('成功了(le／liǎo)', res);
  },
  fail: function () {
    console.log('失敗了(le／liǎo)');
  }
});
wx.onSocketOpen(function (res) {
  //balabala,可以(yǐ)向服務端發消息了(le／liǎo)
}
wx.onSocketMessage(function(data) {
  //接收到(dào)服務端消息，balabala
}
wx.onSocketError(function (res) {
  //socket錯誤，balabala
}

遇到(dào)的(de)問題

• websocket 客戶端自動關掉鏈接：原因是(shì)長時(shí)間不(bù)和(hé / huò)websocket服務端交流，超過了(le／liǎo)nginx設置的(de)proxy_read_timeout時(shí)間就(jiù)自動關閉了(le／liǎo)，如果想長時(shí)間鏈接，可以(yǐ)采用setTimeout等類似工具判斷斷了(le／liǎo)重鏈。

• upstream prematurely closed connection while reading response header from upstream, client: 127.0.0.1, server:...: 如果nginx确保沒錯，多半是(shì)websocket server的(de)原因，比如我的(de)，解決方法就(jiù)是(shì)把node中socket.io模塊換成了(le／liǎo)ws模塊。