關於小程序websocket全套解決方案,Nginx代理wss

需求對話

提問

我在本地web可以使用ws協議去連接websocket,可是小程序不能使用。html

回答

因爲小程序使用的是SSL加密協議,因此須要使用wss。這裏wss與ws的關係就至關於https於http的關係。linux

提問

我用的是寶塔Linux,SSL好申請,可是wss我就不會配置了。web

回答

對的寶塔Linux申請SSL很簡單,一鍵申請,相對https實現就很簡單了。那咱們開始作配置吧。但前提你須要保證如下的幾個必備條件。小程序

前提必備:api

  1. 須要先爲你的websocket域名申請SSL
  2. 寶塔Linux(非寶塔其實同樣能用,可是我這裏的教程主要針對寶塔Linux作的)

Nginx代理WSS

這一步主要用來實現wss轉ws(即轉到http)

圖片描述

打開管理後臺,點開「網站」->「相應的域名」->「配置文件」(我糊的地方只是個人域名和ip信息,不是重要信息,不用在乎)服務器

圖片描述

搜索#SSL-END,在這串註釋後面加上如下代碼,圖上我已經加上了,因此和你的確定不同websocket

#wss協議轉發 小程序裏面要訪問的連接
    # 訪問:wss://xxxx.com/wss
    location /wss {
        proxy_pass http://host:8080;#代理到上面的地址去,
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

關於以上的配置我必需要說清楚,proxy_pass http://host:8080後面的地址加端口是你websocket的地址,這裏必須加上端口,例如:http://baidu.com:8080,這裏須要手動改的就是這一個地方。負載均衡

先別關閉這個窗口,接下來還有

圖片描述

接下來把鼠標移到最頂端,也就是server上面添加如下代碼,同樣的道理,我這裏已經添加了,因此和你的不同,以你的爲準socket

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}
upstream websocket {
    server ip:8080;  #這裏能夠是多個服務端IP(分多行),設置權重就能夠實現負載均衡了
}

這裏須要手動設置一下,就是在upstream websocket裏面有一個ip:8080。這個ip請替換成你的IP,IP在什麼地方能夠看到呢,看你寶塔linux左上角就有了,對就是那個。例如:server 114.114.114.114:8080測試

至此Nginx代理wss就算所有ok。請注意我用的socket端口是8080,若是你的端口被佔用,請你更改,固然若是改了請把一系列的都改了

小程序websocket使用

官方文檔: https://developers.weixin.qq....

我這裏只是作鏈接測試。只是一個Demo

miniWebsocket:function(){
    wx.connectSocket({
      url: 'wss://host/wss',
      //這裏只須要填寫你開始配置的域名就好,可是請在域名後面添加一個/wss。例如:wss://baidu.com/wss
    })
    wx.onSocketOpen(function(res){
      console.log(res)
      console.log('打開成功')
    })
    wx.onSocketMessage(function(res){
      console.log('收到服務器信息'+JSON.stringify(res))
    })
    wx.onSocketOpen(function (res) {
      console.log('WebSocket鏈接已打開!')
      console.log('數據發送')
      wx.sendSocketMessage({
        data: 'ekeylee'
      })   
    })
  }

圖片描述

上圖就是我已經配置好小程序的返回信息,若是有什麼地方寫的不是很清楚,請文末留言,感謝

相關文章
相關標籤/搜索