无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

沒事打開小程序，和附近的人剪刀石頭布，想來就來，想走就走。誰能成為武林高手？！

微信小程序提供了一套在微信上運(yùn)行小程序的解決方案，有比較完整的框架、組件以及 API，在這個平臺上面的想象空間很大。

騰訊云拿到了小程序內(nèi)測資格，研究了一番之后，發(fā)現(xiàn)微信支持 WebSocket 還是很值得玩味的。這個特性意味著我們可以做一些實(shí)時同步或者協(xié)作的小程序。

這篇文章分享一個簡單的剪刀石頭布的小游戲的制作，希望能對想要在小程序中使用 WebSocket 的開發(fā)者有幫助。

整個游戲非常簡單，連接到服務(wù)器后自動匹配在線玩家（沒有則分配一個機(jī)器人），然后兩人進(jìn)行剪刀石頭布的對抗游戲。當(dāng)對方進(jìn)行拳頭選擇的時候，頭像會旋轉(zhuǎn)，這個過程使用 WebSocket 會變得簡單快速。

部署和運(yùn)行

拿到了本小程序源碼的朋友可以嘗試自己運(yùn)行起來。

整體架構(gòu)

小程序的架構(gòu)非常簡單，這里有兩條網(wǎng)絡(luò)同步，一條是 HTTPS 通路，用于常規(guī)請求。對于 WebSocket 請求，會先走 HTTPS 后再切換協(xié)議到 WebSocket 的 TCP 連接，從而實(shí)現(xiàn)全雙工通信。

1. 準(zhǔn)備域名和證書

在微信小程序中，所有的網(wǎng)路請求受到嚴(yán)格限制，不滿足條件的域名和協(xié)議無法請求，具體包括：

• 只允許和在 MP 中配置好的域名進(jìn)行通信，如果還沒有域名，需要注冊一個。
• 網(wǎng)絡(luò)請求必須走 HTTPS 協(xié)議，所以你還需要為你的域名申請一個證書。

域名注冊好之后，可以登錄微信公眾平臺配置通信域名了。

2. 云主機(jī)和鏡像部署

剪刀石頭布的服務(wù)器運(yùn)行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，大家可以直接使用。

騰訊云用戶可以免費(fèi)領(lǐng)取禮包，體驗(yàn)騰訊云小程序解決方案。

鏡像部署完成之后，云主機(jī)上就有運(yùn)行 WebSocket 服務(wù)的基本環(huán)境、代碼和配置了。

鏡像已包含所有小程序的服務(wù)器環(huán)境與代碼，需要體驗(yàn)其它小程序的朋友無需重復(fù)部署

3. 配置 HTTPS

鏡像中已經(jīng)部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。

配置完成后，即可啟動 nginx。

nginx

4. 域名解析

我們還需要添加域名記錄解析到我們的云服務(wù)器上，這樣才可以使用域名進(jìn)行 HTTPS 服務(wù)。

在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機(jī)記錄，直接選擇上面購買的 CVM。

解析生效后，我們在瀏覽器使用域名就可以進(jìn)行 HTTPS 訪問。

5. 啟動 WebSocket 服務(wù)

在鏡像的 nginx 配置中（/etc/nginx/conf.d），已經(jīng)把 /applet/websocket 的請求轉(zhuǎn)發(fā)到 http://127.0.0.1:9595 處理。我們需要把 Node 實(shí)現(xiàn)的 WebSocket 服務(wù)在這個端口里運(yùn)行起來。

進(jìn)入鏡像中源碼位置：

cd /data/release/qcloud-applet-websocket

使用 pm2 啟動服務(wù)：

pm2 start process.json

6. 啟動微信小程序

在微信開發(fā)者工具中修改小程序源碼中的 config.js 配置，把通訊域名修改成上面申請的域名。完成后點(diǎn)擊調(diào)試即可連接到 WebSocket 服務(wù)進(jìn)行游戲。

配置完成后，運(yùn)行小程序就可以看到成功搭建的提示！

為什么要用 WebSocket

使用傳統(tǒng)的 HTTP 輪詢或者長連接的方式也可以實(shí)現(xiàn)類似服務(wù)器推送的效果，但是這類方式都存在資源消耗過大或推送延遲等問題。而 WebSocket 直接使用 TCP 連接保持全雙工的傳輸，可以有效地減少連接的建立，實(shí)現(xiàn)真正的服務(wù)器通信，對于有低延遲有要求的應(yīng)用是一個很好的選擇。

目前瀏覽器對 WebSocket 的支持程度已經(jīng)很好，加上微信小程序的平臺支持，這種可以極大提高客戶端體驗(yàn)的通信方式將會變得更加主流。

Server 端需要實(shí)現(xiàn) WebSocket 協(xié)議，才能支持微信小程序的 WebSocket 請求。鑒于 SocketIO 被廣泛使用，剪刀石頭布的小程序，我們選用了比較著名的 SocketIO 作為服務(wù)端的實(shí)現(xiàn)。

Socket IO 的使用比較簡單，僅需幾行代碼就可啟動服務(wù)。

export class Server {    init(path: string) {        /** Port that server listen on */        this.port = process.env.PORT;        /** HTTP Server instance for both express and socket io */        this.http = http.createServer();        /** Socket io instance */        this.io = SocketIO(this.http, { path });        /** Handle incomming connection */        this.io.on("connection", socket => {            // handle connection        });    }    start() {        this.http.listen(this.port);        console.log(`---- server started. listen : ${this.port} ----`);    }}const server = new Server();server.init("/applet/ws/socket.io");server.start();

但是，SocketIO 和一些其它的服務(wù)器端實(shí)現(xiàn)，都有其配套的客戶端來完成上層協(xié)議的編碼解碼。但是由于微信的限制（不能使用 window 等對象）， SocketIO 的客戶端代碼在微信小程序平臺上是無法運(yùn)行的。

經(jīng)過對 SocketIO 通信進(jìn)行抓包以及研究其客戶端源碼，筆者封裝了一個大約 100 行適用于微信小程序平臺的 WxSocketIO 類，可以幫助開發(fā)者快速使用 SocketIO 來進(jìn)行 WebSocket 通信。

const socket = new WxSocketIO();socket.on('hi', packet => console.log('server say hi: ' + packet.message));socket.emit('hello', { from: 'techird' });

如果想要使用微信原生的 API，那么在服務(wù)器端也可以直接使用 ws 來實(shí)現(xiàn) W3C 標(biāo)準(zhǔn)的接口。不過 SocketIO 支持多進(jìn)程的特性，對于后續(xù)做橫向擴(kuò)張是很有幫助的。騰訊云在后面也會有計(jì)劃推出支持大規(guī)模業(yè)務(wù)需求的 WebSocket 連接服務(wù)，減小業(yè)務(wù)的部署成本。

通信協(xié)議設(shè)計(jì)

實(shí)現(xiàn)一個多客戶端交互的服務(wù)，是需要把中間涉及到所有的消息類型都設(shè)計(jì)清楚的，就像是類似剪刀石頭布這樣一個小程序，都有下面這些消息類型。

消息	方向	說明
hello anjular2和微信小程序的對比 微信小程序官方文檔里看不到的小Tips 相關(guān)資訊RELEVANT NEWS 小程序開發(fā)，這些省錢小技巧你一定需要知道 開放平臺服務(wù)商專區(qū)如何助力小程序發(fā)展 解讀小程序開發(fā)：技術(shù)選型與最佳實(shí)踐 如何估算微信小程序開發(fā)的費(fèi)用？一篇文章教您搞定 微信小程序開發(fā)：從價格到價值的轉(zhuǎn)變 服務(wù)號訂閱通知功能：增強(qiáng)用戶體驗(yàn)的秘密武器 集錦服務(wù)SERVICE 小程序定制 商城小程序 / 點(diǎn)餐小程序 / O2O小程序 響應(yīng)式網(wǎng)站 響應(yīng)式網(wǎng)站建設(shè) / 電商網(wǎng)站建設(shè) / 高端網(wǎng)站建設(shè) APP定制 IOS蘋果APP / Android安卓APP 最新案例LATEST CASES 精銳教育 教育節(jié)能專場 體檢無憂網(wǎng)小程序 材易多商城 咨詢 微信掃碼咨詢 電話咨詢 400-888-9358 立即咨詢