在以前的文章中，我們介紹了HTTP通訊，這種通訊有一個缺點，如果我想從直接從服務(wù)器發(fā)消息給客戶端，需要客戶端先發(fā)起HTTP請求后服務(wù)器才能返回數(shù)據(jù)，且后續(xù)服務(wù)器想發(fā)送數(shù)據(jù)給客戶端都需要客戶端先發(fā)起請求，但這種方案在一些特殊場景應(yīng)用的時候非常消耗資源，比如聊天室，如果使用HTTP請求，需要客戶端每隔一段時間就請求一次服務(wù)器，再由服務(wù)器返回數(shù)據(jù)。這種傳統(tǒng)的模式帶來很明顯的缺點，即客戶端需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

在這種情況下，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進行通訊。WebSocket只需要與服務(wù)器進行一次握手，即可實現(xiàn)實時的數(shù)據(jù)連接，并且傳輸協(xié)議是全雙工的，服務(wù)器可以隨時主動向客戶端發(fā)送數(shù)據(jù)，并且WebSocket協(xié)議在連接創(chuàng)建后，服務(wù)器和客戶端之間交換數(shù)據(jù)時，用于協(xié)議控制的數(shù)據(jù)包頭部相對較小，能明顯降低服務(wù)器及客戶端開銷。

我們的小程序也支持WebSocket通信，如果你想為你的小程序?qū)崿F(xiàn)聊天室、服務(wù)器推送、小程序之間數(shù)據(jù)交互等功能，那就非常有必要搭建一個WebSocket服務(wù)器來進行WebSocket通訊。這篇文章中，我們將簡單介紹小程序WebSocket通信使用方法，并通過實例搭建一個WebSocket服務(wù)器。實現(xiàn)小程序與服務(wù)器之間的通訊。

在教程開始之前，需要搭建搭建好小程序的基礎(chǔ)開發(fā)環(huán)境，關(guān)于如何配置，大家可以參考如何入門小程序開發(fā)這篇文章的入門教程。

服務(wù)器搭建

既然要實現(xiàn)WebSocket通訊，那必須要擁有一臺WebSocket服務(wù)器，服務(wù)端的環(huán)境有很多選擇NodeJS、PHP、Python等大部分主流語言都可以部署WebSocket服務(wù)，今天我們將教大家使用PHP語言進行環(huán)境部署，其他語言請同學(xué)們自行部署。

運行環(huán)境搭建

我這里以Ubuntu Server 16.04 LTS為例，我們需要安裝php運行環(huán)境及NginxWeb服務(wù)，同時也需要申請免費的SSL證書和域名，關(guān)于證書和域名的申請注冊請參考如何快速搭建微信小程序這篇文章。注冊完域名及證書申請，我們就可以開始部署服務(wù)器了！首先，登錄服務(wù)器，執(zhí)行下面的命令。

sudo apt updatesudo apt install php php-fpm php-curl nginx composer -y

安裝完成后，使用瀏覽器訪問你的服務(wù)器IP地址，如果看到下面的內(nèi)容，則證明Web服務(wù)已經(jīng)啟動。

img

因為小程序獲取遠程數(shù)據(jù)，必須為HTTPS或wss環(huán)境，所以目前搭建的環(huán)境，在小程序無法使用，接下來，我們將使用SSL證書加密小程序訪問你服務(wù)器之間的流量。這里就需要剛才注冊的域名及證書了。首先，將下載的證書，上傳到你的服務(wù)器，并記錄下這個位置。然后，我們將配置Nginx服務(wù)，以讓其支持WSS流量。

我們找到/etc/nginx/conf.d文件夾，新建配置文件，為了方便后續(xù)修改，我將這里的配置文件修改為weixin.techeek.cn.conf大家可以根據(jù)自己的需求修改。

cd /etc/nginx/conf.dsudo nano weixin.techeek.cn.conf

在nano編輯器中，我們寫下下面的代碼

server { listen 443 ssl; server_name weixin.techeek.cn; index index.php index.html index.htm; root /usr/share/nginx/html; ssl_certificate /home/ubuntu/1_weixin.techeek.cn_bundle.crt; ssl_certificate_key /home/ubuntu/2_weixin.techeek.cn.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location ~ .php$ { fastcgi_pass unix:/run/php/php7.0-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } location / { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_set_header X-Real-IP $remote_addr; }}server { listen 80 default_server; server_name weixin.techeek.cn; root /usr/share/nginx/html; index index.php index.html index.htm; location / { try_files $uri $uri/ =404; }}

一定注意，將文中server_name中的weixin.techeek.cn更換成你的域名。將ssl_certificate和ssl_certificate_key中證書的路徑更換成你剛上傳證書的路徑。然后，執(zhí)行下面的命令重啟nginx服務(wù)。

sudo service nginx restart

之后，打開你電腦的瀏覽器，然后通過域名訪問，注意，這里一定要在域名前加https://，比如我訪問的域名https://weixin.techeek.cn/。

1542188355313

如果域名前有小鎖標(biāo)志，則證明你已經(jīng)配置成功，可以開始下一步了，這里502報錯不用在意，因為我們還沒有搭建WebSocket服務(wù)，所以服務(wù)器會返回502錯誤。

配置通訊域名

基本環(huán)境配置好之后，可以登錄 微信公眾平臺 配置通信域名了。我們點擊微信公眾號右側(cè)的設(shè)置，然后找到服務(wù)器域名配置。

1542188610710

進入微信公眾平臺管理后臺設(shè)置服務(wù)器配置，如上圖所示，需要將你的服務(wù)器域名配置為你自己的域名。我這里的域名是weixin.techeek.cn。

WebSocket服務(wù)搭建

上述步驟準(zhǔn)備完成后 ，就可以撰寫WebSocket服務(wù)端的代碼了，我這里使用的是PHP socket即時通訊框架Workerman來進行搭建。有了這個框架，我們就可以非常方便的搭建WebSocket服務(wù)。因為本文主要講解小程序端的WebSocket的使用，關(guān)于Workerman的詳細使用教程，可以參考Workerman官方手冊，本文僅做基礎(chǔ)環(huán)境安裝的介紹。

首先，我們創(chuàng)建一個運行WebSocket服務(wù)的目錄，我這里創(chuàng)建名為php-websocket-server，目錄位置可以自定義，我這里就將項目放在ubuntu用戶的根目錄下。

mkdir /home/ubuntu/php-websocket-servercd /home/ubuntu/php-websocket-server

接下來，我們使用composer包管理器安裝WebSocket運行環(huán)境。因為某些原因，國內(nèi)訪問composer可能會報錯，所以我們需要使用國內(nèi)的composer鏡像。然后就可以安裝Workerman了。

sudo composer config -g repo.packagist composer https://packagist.phpcomposer.comsudo composer updatesudo composer require workerman/workerman

安裝完成后，默認(rèn)情況下會有三個文件，composer.json、composer.lock、vendor這三個文件，如果沒有，請重新執(zhí)行上面的命令。

├── composer.json├── composer.lock└── vendor

安裝完workerman依賴文件，我們就可以撰寫系統(tǒng)所需的代碼了。使用nano編輯器，新建一個可執(zhí)行的php文件，我這里創(chuàng)建的文件名為webSocket.php，大家可自行更改。

nano webSocket.php

代碼如下

<?phprequire_once __DIR__ . '/vendor/autoload.php';use WorkermanWorker;$ws_worker = new Worker("websocket://0.0.0.0:8080");$ws_worker->count = 4;$ws_worker->onmessage = function($connection, $data){ $connection->send('hello ' . $data);};Worker::runAll();

這時，一個最基本的websocket服務(wù)就編輯完成了，這里的代碼意思是，通過/vendor/autoload.php引入Workerman的php文件，然后在8080端口創(chuàng)建websocket服務(wù)，并設(shè)置進程為4個進程。然后執(zhí)行onMessage回調(diào)函數(shù)，該函數(shù)接收客戶端所發(fā)過來的數(shù)據(jù)$data，然后使用send方法將數(shù)據(jù)發(fā)回給客戶端。

接下來，我們就可以運行服務(wù)器了，執(zhí)行下面的代碼即可運行。

sudo php webSocket.php start

如果看到類似下面的輸出，證明我們websocket服務(wù)器已經(jīng)啟動，接下來就可以開始配置小程序端的代碼了。

1542247109151

小程序端

連接服務(wù)器

小程序連接Websocket服務(wù)器是通過wx.connectSocket()API進行連接的，為了方便連接API，我們先看看官方的文檔。

我們看到只有url是必填項，其他屬性可以不填，那么連接服務(wù)器就比較簡單了，我們打開index.js文件，寫下下面的代碼。

Page({onReady: function () { wx.connectSocket({ url: 'wss://weixin.techeek.cn' })},})

有小程序開發(fā)經(jīng)驗的小伙伴都知道，這里的onReady是小程序的生命周期函數(shù)，負(fù)責(zé)在小程序初次渲染完成后執(zhí)行的函數(shù)，這樣我們編譯完小程序，小程序就自動連接服務(wù)器?，F(xiàn)在編譯一下試試，咦，好像不行啊，怎么沒看到小程序有反應(yīng)。我們打開控制臺，點擊Network按鈕，如果看到類似下面的內(nèi)容，就證明你的小程序已經(jīng)成功鏈接服務(wù)器了。

1542249696427

這里的HTTP狀態(tài)碼是101，101狀態(tài)碼是websocket特有的狀態(tài)碼，我們已經(jīng)成功連接搭建的服務(wù)器。但是我們能不能直觀點看到已經(jīng)連接服務(wù)器呢？當(dāng)然可以，參考文檔使用success屬性，我們在其中加入回調(diào)函數(shù)。修改代碼如下。

Page({ onReady: function () { wx.connectSocket({ url: 'wss://weixin.techeek.cn', success: function (res) { console.log("連接服務(wù)器成功") }, fail: function (res) { console.log("連接服務(wù)器失敗") } }) },})

我們增加一個回調(diào)函數(shù)，如果服務(wù)器連接成功，向小程序控制臺打印出連接服務(wù)器成功。反正打印連接服務(wù)器失敗。

1542250247835

當(dāng)然，我們也可以將成功的內(nèi)容展示給小程序前端，代碼如下，首先修改index.wxml代碼。

<view><text>連接服務(wù)器狀態(tài)：{{status}}</text></view>

然后打開index.js文件，修改代碼

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn', success: function (res) { myThis.setData({ status: "連接服務(wù)器成功" }) }, fail: function (res) { myThis.setData({ status: "連接服務(wù)器失敗" }) } }) },})

現(xiàn)在重新編譯小程序，你會看到類似這樣的界面。

1542250497626

向服務(wù)器發(fā)送數(shù)據(jù)

服務(wù)器搭建我們說到，我們的服務(wù)器的代碼內(nèi)容是將小程序發(fā)給服務(wù)器的任意字符前加hello之后返回給小程序，現(xiàn)在，我們已經(jīng)成功連接服務(wù)器了。接下來，我們需要修改代碼，以便小程序?qū)?shù)據(jù)發(fā)給服務(wù)器。

官方文檔中，使用wx.sendSocketMessage()API將數(shù)據(jù)發(fā)給服務(wù)器，根據(jù)官方文檔，通過 WebSocket 連接發(fā)送數(shù)據(jù)。需要先wx.connectSocket連接服務(wù)器，并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。所以在調(diào)用wx.sendSocketMessage()前，需要先調(diào)用wx.onSocketOpen監(jiān)聽WebSocket連接是否打開。代碼如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { myThis.setData({ status: "websocket連接服務(wù)器成功" }) }) },})

現(xiàn)在，我們就可以使用wx.sendSocketMessage()發(fā)送數(shù)據(jù)到服務(wù)器了，先看看官方文檔，怎么使用。

我們只需要傳data內(nèi)容給API，就能發(fā)內(nèi)容給服務(wù)器了，那么修代碼內(nèi)容如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { wx.sendSocketMessage({ data: "你好", success: function (res) { console.log("數(shù)據(jù)已發(fā)給服務(wù)器") } }) myThis.setData({ status: "websocket連接服務(wù)器成功" }) }) },})

現(xiàn)在，我們的數(shù)據(jù)已經(jīng)可以發(fā)給服務(wù)器了，可是我們還沒有看到服務(wù)器返回的數(shù)據(jù)，這時，我們就該使用另一個API了，監(jiān)聽WebSocket 接受到服務(wù)器的消息事件wx.onSocketMessage()，該API返回服務(wù)器發(fā)出的消息。但是onReady函數(shù)是頁面加載就運行的，這時服務(wù)器還沒反應(yīng)過來，數(shù)據(jù)返回了沒收到該怎么處理？我們可以引入另一個生命周期函數(shù)onLoad，這個函數(shù)是小程序負(fù)責(zé)監(jiān)聽頁面加載的函數(shù)，我們可以將服務(wù)器消息事件監(jiān)聽的API寫在這里，當(dāng)接收到數(shù)據(jù)，由這個函數(shù)返回相關(guān)內(nèi)容。所以代碼如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { wx.sendSocketMessage({ data: "你好", success: function (res) { console.log("數(shù)據(jù)已發(fā)給服務(wù)器") } }) myThis.setData({ status: "websocket連接服務(wù)器成功" }) }) }, onLoad: function (options) { var myThis = this; wx.onSocketMessage(function (res) { myThis.setData({ message: res.data }) }) },})

為了方便觀察服務(wù)器返回的數(shù)據(jù)，我們修改下前端，增加服務(wù)器消息監(jiān)聽的內(nèi)容。

<view><text>連接服務(wù)器狀態(tài)：{{status}}</text></view><view><text>服務(wù)器消息：{{message}}</text></view>

現(xiàn)在，重新編譯，就能看到服務(wù)器返回Hello 你好的內(nèi)容，我們發(fā)出的內(nèi)容為你好，服務(wù)器在內(nèi)容前加一個Hello然后返回給小程序。我們可以修改你好為任意內(nèi)容，看看服務(wù)器能否正常返回相關(guān)內(nèi)容。稍微優(yōu)化下前端和后端代碼，如下。

index.wxml

<button type="primary" bindtap="connect">連接webSocket服務(wù)器</button><button type="warn" bindtap="close">斷開webSocket服務(wù)器</button><input placeholder="在這里輸入你要發(fā)送的彈幕內(nèi)容" bindblur="input"/><button bindtap="send">向webSocket服務(wù)器發(fā)送消息</button><view><text>連接服務(wù)器狀態(tài)：{{status}}</text></view><view><text>服務(wù)器消息：{{message}}</text></view>

index.js

Page({ connect() { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { myThis.setData({ status:"websocket連接服務(wù)器成功" }) }) }, close(){ var myThis = this; wx.closeSocket() wx.onSocketClose(function (res) { myThis.setData({ status: "websocket服務(wù)器已經(jīng)斷開" }) }) },send(){ var myThis = this; wx.sendSocketMessage({ data: this.inputValue, success: function (res) { console.log("發(fā)送信息") wx.showToast({ title: '已發(fā)送', icon: 'success', duration: 1000 }) }, fail: function (res) { myThis.setData({ status: "請連接服務(wù)器" }) } })}, input: function (e) { this.inputValue = e.detail.value }, onLoad: function (options) { var myThis = this; wx.onSocketMessage(function (res) { myThis.setData({ message:res.data }) wx.showToast({ title: '你收到來自服務(wù)器的消息', icon: 'none', duration: 2000 }) }) },})

1542253679047

這樣，我們就實現(xiàn)了向服務(wù)器發(fā)送數(shù)據(jù)，同時服務(wù)器返回數(shù)據(jù)的全部流程。

服務(wù)器主動發(fā)送數(shù)據(jù)到小程序

有人可能會問，這個HTTP通信方式?jīng)]有區(qū)別啊，還是小程序先請求數(shù)據(jù)到服務(wù)器，然后服務(wù)器返回數(shù)據(jù)啊，我沒看到什么不同。雖然表現(xiàn)是這樣，但是現(xiàn)在小程序和服務(wù)器是長連接狀態(tài)，服務(wù)器可以直接推送內(nèi)容到小程序，不信？我們試試。打開你的服務(wù)器Websocket.php文件，將代碼修改為下面的內(nèi)容。

<?phprequire_once __DIR__ . '/vendor/autoload.php';use WorkermanWorker;use WorkermanLibTimer;$worker = new Worker('websocket://0.0.0.0:8080');$worker->onWorkerStart = function($worker){ Timer::add(10, function()use($worker){ foreach($worker->connections as $connection) { $connection->send('你好！'); } });};$worker->onMessage = function($connection, $data){ echo $data . "n"; $connection->send('服務(wù)器已經(jīng)收到了你的消息');};Worker::runAll();

然后運行服務(wù)器。

sudo php webSocket.php start

這行代碼中，我們實現(xiàn)了小程序連接服務(wù)器后，服務(wù)器每隔10秒主動推送數(shù)據(jù)你好給小程序，無需小程序主動請求內(nèi)容，同時，小程序發(fā)出的內(nèi)容，可以在服務(wù)端顯示?，F(xiàn)在點擊你小程序連接webSocket服務(wù)器按鈕，看看效果。

1542254161118

然后我們向服務(wù)器發(fā)點消息試試。服務(wù)器也已經(jīng)收到了小程序發(fā)出的數(shù)據(jù)。

1542254236499

總結(jié)

websocket通信在小程序端還是比較簡單的，趕快去自己試試吧~后續(xù)我還會介紹一篇利用websocket通訊進行聊天室搭建的教程