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

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

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

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

服務(wù)器搭建

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

運(yùn)行環(huán)境搭建

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

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

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

img

因?yàn)樾〕绦颢@取遠(yuǎn)程數(shù)據(jù)，必須為HTTPS或wss環(huán)境，所以目前搭建的環(huán)境，在小程序無法使用，接下來，我們將使用SSL證書加密小程序訪問你服務(wù)器之間的流量。這里就需要?jiǎng)偛抛?cè)的域名及證書了。首先，將下載的證書，上傳到你的服務(wù)器，并記錄下這個(gè)位置。然后，我們將配置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報(bào)錯(cuò)不用在意，因?yàn)槲覀冞€沒有搭建WebSocket服務(wù)，所以服務(wù)器會(huì)返回502錯(cuò)誤。

配置通訊域名

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

1542188610710

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

WebSocket服務(wù)搭建

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

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

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

接下來，我們使用composer包管理器安裝WebSocket運(yùn)行環(huán)境。因?yàn)槟承┰颍瑖?guó)內(nèi)訪問composer可能會(huì)報(bào)錯(cuò)，所以我們需要使用國(guó)內(nèi)的composer鏡像。然后就可以安裝Workerman了。

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

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

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

安裝完workerman依賴文件，我們就可以撰寫系統(tǒng)所需的代碼了。使用nano編輯器，新建一個(gè)可執(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();

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

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

sudo php webSocket.php start

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

1542247109151

小程序端

連接服務(wù)器

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

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

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

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

1542249696427

這里的HTTP狀態(tài)碼是101，101狀態(tài)碼是websocket特有的狀態(tài)碼，我們已經(jīng)成功連接搭建的服務(wù)器。但是我們能不能直觀點(diǎn)看到已經(jīng)連接服務(wù)器呢？當(dāng)然可以，參考文檔使用success屬性，我們?cè)谄渲屑尤牖卣{(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ù)器失敗") } }) },})

我們?cè)黾右粋€(gè)回調(diào)函數(shù)，如果服務(wù)器連接成功，向小程序控制臺(tái)打印出連接服務(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)在重新編譯小程序，你會(huì)看到類似這樣的界面。

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ù)，這時(shí)，我們就該使用另一個(gè)API了，監(jiān)聽WebSocket 接受到服務(wù)器的消息事件wx.onSocketMessage()，該API返回服務(wù)器發(fā)出的消息。但是onReady函數(shù)是頁面加載就運(yùn)行的，這時(shí)服務(wù)器還沒反應(yīng)過來，數(shù)據(jù)返回了沒收到該怎么處理？我們可以引入另一個(gè)生命周期函數(shù)onLoad，這個(gè)函數(shù)是小程序負(fù)責(zé)監(jiān)聽頁面加載的函數(shù)，我們可以將服務(wù)器消息事件監(jiān)聽的API寫在這里，當(dāng)接收到數(shù)據(jù)，由這個(gè)函數(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)容前加一個(gè)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: "請(qǐng)連接服務(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

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

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

有人可能會(huì)問，這個(gè)HTTP通信方式?jīng)]有區(qū)別啊，還是小程序先請(qǐng)求數(shù)據(jù)到服務(wù)器，然后服務(wù)器返回?cái)?shù)據(jù)啊，我沒看到什么不同。雖然表現(xiàn)是這樣，但是現(xiàn)在小程序和服務(wù)器是長(zhǎng)連接狀態(tài)，服務(wù)器可以直接推送內(nèi)容到小程序，不信？我們?cè)囋?。打開你的服務(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();

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

sudo php webSocket.php start

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

1542254161118

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

1542254236499

總結(jié)

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