目錄

準(zhǔn)備域名和證書搭建小程序開發(fā)環(huán)境搭建 HTTP 服務(wù)搭建 HTTPS 服務(wù)小程序會(huì)話WebSocket 服務(wù)剪刀石頭布小游戲

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

任務(wù)時(shí)間：20min ~ 40min

小程序后臺(tái)服務(wù)需要通過 HTTPS 訪問，在實(shí)驗(yàn)開始之前，我們要準(zhǔn)備域名和 SSL 證書。

域名注冊

如果您還沒有域名，可以在騰訊云上選購，過程可以參考下面的視頻：

• 視頻 - 在騰訊云上購買域名

域名解析

域名購買完成后, 需要將域名解析到實(shí)驗(yàn)云主機(jī)上，實(shí)驗(yàn)云主機(jī)的 IP 為：

<您的 CVM IP 地址>

在騰訊云購買的域名，可以到控制臺(tái)添加解析記錄，過程可參考下面的視頻：

• 視頻 - 如何在騰訊云上解析域名

域名設(shè)置解析后需要過一段時(shí)間才會(huì)生效，通過?ping?命令檢查域名是否生效?[?]，如：

ping www.yourmpdomain.com

如果 ping 命令返回的信息中含有你設(shè)置的解析的 IP 地址，說明解析成功。

注意替換下面命令中的?www.yourmpdomain.com?為您自己的注冊的域名

申請 SSL 證書

騰訊云提供了 SSL 證書的免費(fèi)申請，申請方式可參考下面視頻：

• 視頻 - 在騰訊云上申請 SSL 證書

申請?zhí)峤缓?#xff0c;審批結(jié)果會(huì)以短信的形式通知。審批通過后，可以到?SSL 控制臺(tái)下載您的證書文件，可參考下面的視頻：

• 視頻 - 在騰訊云上下載 SSL 證書

搭建小程序開發(fā)環(huán)境

任務(wù)時(shí)間：15min ~ 30min

在開始搭建我們的小程序服務(wù)器之前，需要先完成客戶端小程序開發(fā)環(huán)境的搭建。

注冊開發(fā)者賬號

如果你還不是小程序開發(fā)者，請先在微信公眾平臺(tái)并注冊：

具體注冊流程可參考如下視頻：

• 視頻 - 注冊開發(fā)者賬號

若您已注冊，請點(diǎn)擊下一步。

配置小程序服務(wù)器信息

登錄微信公眾平臺(tái)后，依次進(jìn)入?設(shè)置?-?開發(fā)設(shè)置?-?服務(wù)器域名?-?修改。

掃碼完成身份校驗(yàn)后，request 合法域名和 socket 合法域名均填寫在上一步準(zhǔn)備好的域名地址。

配置完成后，點(diǎn)擊?保存并提交。您可以點(diǎn)擊如下視頻查看如何進(jìn)行配置：

• 視頻 - 配置小程序服務(wù)器信息

運(yùn)行配套小程序代碼

要運(yùn)行本實(shí)驗(yàn)配套的小程序代碼，請下載下列資源：

• 實(shí)驗(yàn)配套源碼
• 微信小程序開發(fā)工具

源碼下載后，請解壓到本地工作目錄。

開發(fā)工具下載后，請安裝并啟動(dòng)，然后用微信掃碼登錄。

登錄后，選擇?本地小程序項(xiàng)目?-?添加項(xiàng)目，使用以下配置：

• AppID：填寫小程序的 AppID，請登錄公眾平臺(tái)后在?設(shè)置?-?開發(fā)設(shè)置?-?開發(fā)者 ID?中查看
• 項(xiàng)目名稱：填寫任意您喜歡的名稱
• 項(xiàng)目目錄：選擇剛才解壓的配套源碼目錄（目錄包含?app.js）

填寫完成后，點(diǎn)擊?添加項(xiàng)目。具體操作可查看如下視頻：

• 視頻 - 運(yùn)行配套小程序代碼

設(shè)置實(shí)驗(yàn)域名

在開發(fā)工具的?編輯?面板中，選中?app.js?進(jìn)行編輯，需要修改小程序通信域名[?]，請參考下面的配置：

App({config: {host: 'www.yourdomain.com' // 這個(gè)地方填寫你的域名},onLaunch () {console.log('App.onLaunch()');} });

當(dāng)然，這步操作也錄制了對應(yīng)的視頻：

• 視頻 - 設(shè)置實(shí)驗(yàn)域名

實(shí)驗(yàn)配套源碼所用通信域名都會(huì)使用該設(shè)置，為了您順利進(jìn)行實(shí)驗(yàn)，請把域名修改為之前步驟準(zhǔn)備的域名

搭建 HTTP 服務(wù)

任務(wù)時(shí)間：15min ~ 30min

下面的步驟，將帶大家在服務(wù)器上使用 Node 和 Express 搭建一個(gè) HTTP 服務(wù)器

安裝 NodeJS

使用下面的命令安裝 NodeJS

sudo apt-get update sudo wget https://mc.qcloudimg.com/static/archive/262420521a966befe17dfa0070ddb272/node-v6.11.0.tar.gz sudo tar xvf node-v6.11.0.tar.gz cd node-v6.11.0 sudo ./configure sudo make sudo make install sudo cp /usr/local/bin/node /usr/sbin/

安裝完成后，使用下面的命令測試安裝結(jié)果

node -v

編寫 HTTP Server 源碼

使用下面的命令在服務(wù)器創(chuàng)建一個(gè)工作目錄：

sudo mkdir -p /data/release/webapp

進(jìn)入此工作目錄

cd /data/release/webapp

在工作目錄創(chuàng)建 package.json 文件，并修改文件的訪問權(quán)限。

sudo touch package.json sudo chmod a+r+w package.json

修改 package.json?添加我們服務(wù)器包的名稱和版本號，可參考下面的示例。

示例代碼：/data/release/webapp/package.json

{"name": "webapp","version": "1.0.0" }

完成后，使用?Ctrl + S?保存文件

在工作目錄創(chuàng)建 app.js

cd /data/release/webapp sudo touch app.js sudo chmod a+rw app.js

修改 app.js 文件，使用 Express.js 來監(jiān)聽?8765?端口[?]，app.js文件可參考下面的示例代碼。

示例代碼：/data/release/webapp/app.js

// 引用 express 來支持 HTTP Server 的實(shí)現(xiàn) const express = require('express');// 創(chuàng)建一個(gè) express 實(shí)例 const app = express();// 實(shí)現(xiàn)唯一的一個(gè)中間件，對于所有請求，都輸出 "Response from express" app.use((request, response, next) => {response.write('Response from express');response.end(); });// 監(jiān)聽端口，等待連接 const port = 8765; app.listen(port);// 輸出服務(wù)器啟動(dòng)日志 console.log(`Server listening at http://127.0.0.1:${port}`);

本實(shí)驗(yàn)會(huì)以 8765 端口的打開作為實(shí)驗(yàn)步驟完成的依據(jù)，為了后面的實(shí)驗(yàn)步驟順利進(jìn)行，請不要使用其它端口號

運(yùn)行 HTTP 服務(wù)

在開始之前，我們先來安裝?[PM2]

sudo apt-get install npm sudo npm install -g pm2

PM2 安裝時(shí)間可能稍長，請耐心等候?[?]

我們的服務(wù)器源碼里使用到了 Express 模塊，下面的命令使用 NPM 來安裝 Express

cd /data/release/webapp sudo npm install express --save

安裝完成后，使用 PM2 來啟動(dòng) HTTP 服務(wù)

cd /data/release/webapp pm2 start app.js

現(xiàn)在，您的 HTTP 服務(wù)已經(jīng)在?http://<您的 CVM IP 地址>:8765?運(yùn)行

要查看服務(wù)輸出的日志，可以使用下面的命令：

pm2 logs

如果要重啟服務(wù)，可以使用下面的命令：

pm2 restart app

我們使用 PM2 來進(jìn)行 Node 進(jìn)程的運(yùn)行、監(jiān)控和管理

NPM 倉庫在國內(nèi)訪問速度可能不太理想，如果實(shí)在太慢可以嘗試使用 CNPM 的 Registry 進(jìn)行安裝：npm install pm2 -g --registry=https://r.cnpmjs.org/

搭建 HTTPS 服務(wù)

任務(wù)時(shí)間：15min ~ 30min

微信小程序要求和服務(wù)器的通信都通過 HTTPS 進(jìn)行

安裝 Nginx

在 Ubuntu 上，可直接使用?apt-get?來安裝 Nginx

sudo apt-get install nginx -y

安裝完成后，使用?nginx?命令啟動(dòng) Nginx：

sudo /etc/init.d/nginx start

此時(shí)訪問?http://<您的域名>?可以看到 Nginx 測試頁面?[?]

如果你的機(jī)器同時(shí)安裝了其他軟件占用80端口，那上面的訪問方式就不能使用了，而且 Nginx 都可能啟動(dòng)不了，你需要關(guān)閉該軟件再重新啟動(dòng) Nginx。

配置 HTTPS 反向代理

修改 /etc/nginx 目錄的讀寫權(quán)限

sudo chmod a+rw /etc/nginx

將之前下載的 SSL 證書（解壓后 Nginx 目錄分別以 crt 和 key 作為后綴的文件）通過拖動(dòng)到左側(cè)文件瀏覽器 /etc/nginx 目錄的方式來上傳文件到服務(wù)器上。

如何上傳 SSL 證書到 /etc/nginx 目錄

在 /etc/nginx/conf.d 目錄創(chuàng)建 ssl.conf 文件

cd /etc/nginx/conf.d sudo touch ssl.conf sudo chmod a+rw ssl.conf

將?ssl.conf 文件修改為如下內(nèi)容

示例代碼：/etc/nginx/conf.d/ssl.conf

server {listen 443;server_name www.example.com; # 改為綁定證書的域名# ssl 配置ssl on;ssl_certificate 1_www.example.com_bundle.crt; # 改為自己申請得到的 crt 文件的名稱ssl_certificate_key 2_www.example.com.key; # 改為自己申請得到的 key 文件的名稱ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {proxy_pass http://127.0.0.1:8765;}}

按?Ctrl + S?保存配置文件，讓 Nginx 重新加載配置使其生效：

sudo nginx -s reload

在瀏覽器通過 https 的方式訪問你解析的域名來測試 HTTPS 是否成功啟動(dòng)

在小程序中測試 HTTPS 訪問

打開配套的小程序，點(diǎn)擊?實(shí)驗(yàn)一：HTTPS，點(diǎn)擊?發(fā)送請求?來測試訪問結(jié)果。

如果服務(wù)器響應(yīng)成功，請點(diǎn)擊下一步。

小程序會(huì)話

任務(wù)時(shí)間：45min ~ 90min

小程序不支持 Cookie 存儲(chǔ)和跟蹤，服務(wù)器需要自行實(shí)現(xiàn)會(huì)話層

安裝 MongoDB

使用 apt-get 在機(jī)器上安裝?[MongoDB]?及其客戶端命令行工具：

sudo apt-get install mongodb-server mongodb -y

安裝結(jié)束后，可以使用下面的命令查看安裝的版本：

sudo mongod --version sudo mongo --version

MongoDB 是一款 NoSQL 數(shù)據(jù)庫，支持 JSON 格式的結(jié)構(gòu)化文檔存儲(chǔ)和查詢，對 JavaScript 有著友好的支持

啟動(dòng) MongoDB

創(chuàng)建目錄，用于 MongoDB 數(shù)據(jù)和日志存儲(chǔ)：

sudo mkdir -p /data/mongodb sudo mkdir -p /data/logs/mongodb

創(chuàng)建后，使用下面的命令來啟動(dòng) MongoDB：[?]

sudo mongod --fork --dbpath /data/mongodb --logpath /data/logs/mongodb/webapp.log

可以使用下面的命令來檢查是否啟動(dòng)成功?[?]

netstat -ltp | grep 27017

MongoDB 首次啟動(dòng)可能會(huì)花費(fèi)大概 1min 時(shí)間，請耐心等待

MongoDB 默認(rèn)監(jiān)聽 27017 端口等待連接，下面的命令查看當(dāng)前 27017 端口被哪個(gè)進(jìn)程占用，如果是 MongoDB 的進(jìn)程，則表示啟動(dòng)成功。

添加 MongoDB 用戶

登錄本地 MongoDB 服務(wù)：

sudo mongo

登錄后，創(chuàng)建一個(gè)用戶?webapp?[?]：

use webapp; db.createUser({ user: 'webapp', pwd: 'webapp-dev', roles: ['dbAdmin', 'readWrite']});

創(chuàng)建完成后，使用?exit?退出命令行工具。

創(chuàng)建的用戶和密碼將用于下一步中連接數(shù)據(jù)庫時(shí)使用，如果使用不同的用戶或密碼，注意要保存好

安裝 Node 模塊

實(shí)現(xiàn)小程序的會(huì)話功能，我們需要安裝?[connect-mongo]?和?[wafer-node-session]

cd /data/release/webapp sudo npm install connect-mongo wafer-node-session --save

connect-mongo?模塊通過連接到 MongoDB 為會(huì)話提供存儲(chǔ)

wafer-node-session?是由騰訊云提供的獨(dú)立小程序會(huì)話管理中間件

實(shí)現(xiàn)小程序會(huì)話

在工作目錄創(chuàng)建配置文件 config.js，用于保存我們服務(wù)所用的配置[?].

cd /data/release/webapp sudo touch config.js sudo chmod a+rw config.js

修改配置文件 config.js，可參考下面的實(shí)現(xiàn)(注：請將參考配置文件中的 YORU_APP_ID 和 YOUR_APP_SECRET 替換為你申請的小程序?qū)?yīng)的 AppID 和 AppSecret)：

示例代碼：/data/release/webapp/config.js

module.exports = { serverPort: '8765', // 小程序 appId 和 appSecret // 請到 https://mp.weixin.qq.com 獲取 AppID 和 AppSecretappId: 'YORU_APP_ID', appSecret: 'YOUR_APP_SECRET', // mongodb 連接配置，生產(chǎn)環(huán)境請使用更復(fù)雜的用戶名密碼mongoHost: '127.0.0.1', mongoPort: '27017', mongoUser: 'webapp', mongoPass: 'webapp-dev', mongoDb: 'webapp' };

編輯 app.js，添加會(huì)話實(shí)現(xiàn)邏輯，可參考下面的代碼：

示例代碼：/data/release/webapp/app.js

// 引用 express 來支持 HTTP Server 的實(shí)現(xiàn) const express = require('express'); // 引用 wafer-session 支持小程序會(huì)話 const waferSession = require('wafer-node-session'); // 使用 MongoDB 作為會(huì)話的存儲(chǔ) const MongoStore = require('connect-mongo')(waferSession); // 引入配置文件 const config = require('./config'); // 創(chuàng)建一個(gè) express 實(shí)例 const app = express();// 添加會(huì)話中間件，登錄地址是 /login app.use(waferSession({ appId: config.appId, appSecret: config.appSecret, loginPath: '/login',store: new MongoStore({ url: `mongodb://${config.mongoUser}:${config.mongoPass}@${config.mongoHost}:${config.mongoPort}/${config.mongoDb}` }) })); // 在路由 /me 下，輸出會(huì)話里包含的用戶信息 app.use('/me', (request, response, next) => { response.json(request.session ? request.session.userInfo : { noBody: true }); if (request.session) {console.log(`Wafer session success with openId=${request.session.userInfo.openId}`);} }); // 實(shí)現(xiàn)一個(gè)中間件，對于未處理的請求，都輸出 "Response from express" app.use((request, response, next) => {response.write('Response from express');response.end(); });// 監(jiān)聽端口，等待連接 app.listen(config.serverPort);// 輸出服務(wù)器啟動(dòng)日志 console.log(`Server listening at http://127.0.0.1:${config.serverPort}`);

源碼編寫完成后，重啟服務(wù)：

pm2 restart app

重啟后，使用配套的小程序完成會(huì)話測試：打開配套小程序 - 點(diǎn)擊?實(shí)驗(yàn)二：會(huì)話?-?獲取會(huì)話，如果您能看到您的微信頭像，那就表示會(huì)話已經(jīng)成功獲取了。

隨著服務(wù)變得復(fù)雜，我們可以把配置集中起來方便管理，比如目前我們需要保存：服務(wù)器運(yùn)行端口、小程序配置、MongoDB 連接配置

WebSocket 服務(wù)

任務(wù)時(shí)間：45min ~ 90min

安裝 ws 模塊

本實(shí)驗(yàn)使用?ws?模塊來在服務(wù)器上支持 WebSocket 協(xié)議，下面使用 NPM 來安裝：

cd /data/release/webapp sudo apt-get install npm -y sudo npm install --save ws

實(shí)現(xiàn) WebSocket 服務(wù)器

創(chuàng)建 websocket.js 文件，實(shí)現(xiàn) WebSocket 服務(wù)

cd /data/release/webapp sudo touch websocket.js sudo chmod a+rw websocket.js

修改 websocket.js 文件，可參考下面的代碼：

示例代碼：/data/release/webapp/websocket.js

// 引入 ws 支持 WebSocket 的實(shí)現(xiàn) const ws = require('ws');// 導(dǎo)出處理方法 exports.listen = listen;/*** 在 HTTP Server 上處理 WebSocket 請求* @param {http.Server} server* @param {wafer.SessionMiddleware} sessionMiddleware*/ function listen(server, sessionMiddleware) {// 使用 HTTP Server 創(chuàng)建 WebSocket 服務(wù)，使用 path 參數(shù)指定需要升級為 WebSocket 的路徑const wss = new ws.Server({ server, path: '/ws' });// 監(jiān)聽 WebSocket 連接建立wss.on('connection', (ws,request) => {// 要升級到 WebSocket 協(xié)議的 HTTP 連接// 被升級到 WebSocket 的請求不會(huì)被 express 處理，// 需要使用會(huì)話中間節(jié)獲取會(huì)話sessionMiddleware(request, null, () => {const session = request.session;if (!session) {// 沒有獲取到會(huì)話，強(qiáng)制斷開 WebSocket 連接ws.send(JSON.stringify(request.sessionError) || "No session avaliable");ws.close();return;}// 保留這個(gè)日志的輸出可讓實(shí)驗(yàn)室能檢查到當(dāng)前步驟是否完成console.log(`WebSocket client connected with openId=${session.userInfo.openId}`);serveMessage(ws, session.userInfo);});});// 監(jiān)聽 WebSocket 服務(wù)的錯(cuò)誤wss.on('error', (err) => {console.log(err);}); }/*** 進(jìn)行簡單的 WebSocket 服務(wù)，對于客戶端發(fā)來的所有消息都回復(fù)回去*/ function serveMessage(ws, userInfo) {// 監(jiān)聽客戶端發(fā)來的消息ws.on('message', (message) => {console.log(`WebSocket received: ${message}`);ws.send(`Server: Received(${message})`);});// 監(jiān)聽關(guān)閉事件ws.on('close', (code, message) => {console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);});// 連接后馬上發(fā)送 hello 消息給會(huì)話對應(yīng)的用戶ws.send(`Server: 恭喜，${userInfo.nickName}`); }

編輯 app.js，調(diào)用 WebSocket 服務(wù)，可參考下面代碼：

示例代碼：/data/release/webapp/app.js

// HTTP 模塊同時(shí)支持 Express 和 WebSocket const http = require('http'); // 引用 express 來支持 HTTP Server 的實(shí)現(xiàn) const express = require('express'); // 引用 wafer-session 支持小程序會(huì)話 const waferSession = require('wafer-node-session'); // 使用 MongoDB 作為會(huì)話的存儲(chǔ) const MongoStore = require('connect-mongo')(waferSession); // 引入配置文件 const config = require('./config'); // 引入 WebSocket 服務(wù)實(shí)現(xiàn) const websocket = require('./websocket');// 創(chuàng)建一個(gè) express 實(shí)例 const app = express();// 獨(dú)立出會(huì)話中間件給 express 和 ws 使用 const sessionMiddleware = waferSession({appId: config.appId,appSecret: config.appSecret,loginPath: '/login',store: new MongoStore({url: `mongodb://${config.mongoUser}:${config.mongoPass}@${config.mongoHost}:${config.mongoPort}/${config.mongoDb}`}) }); app.use(sessionMiddleware);// 在路由 /me 下，輸出會(huì)話里包含的用戶信息 app.use('/me', (request, response, next) => { response.json(request.session ? request.session.userInfo : { noBody: true }); if (request.session) {console.log(`Wafer session success with openId=${request.session.userInfo.openId}`);} }); // 實(shí)現(xiàn)一個(gè)中間件，對于未處理的請求，都輸出 "Response from express" app.use((request, response, next) => {response.write('Response from express');response.end(); });// 創(chuàng)建 HTTP Server 而不是直接使用 express 監(jiān)聽 const server = http.createServer(app);// 讓 WebSocket 服務(wù)在創(chuàng)建的 HTTP 服務(wù)器上監(jiān)聽 websocket.listen(server, sessionMiddleware);// 啟動(dòng) HTTP 服務(wù) server.listen(config.serverPort);// 輸出服務(wù)器啟動(dòng)日志 console.log(`Server listening at http://127.0.0.1:${config.serverPort}`);

修改完成后，按?Ctrl + S?保存文件，并重啟服務(wù)：

pm2 restart app

更新 Nginx 代理

編輯 Nginx 配置 ssl.conf，添加 WebSocket 支持，可參考下面的配置(注：請將參考配置文件中的 www.example.com 替換為前面步驟申請的域名，將 1_www.example.com_bundle.crt 和 2_www.example.com.key 替換為前面步驟申請并上傳的 SSL 證書的名稱)：

示例代碼：/etc/nginx/conf.d/ssl.conf

# WebSocket 配置 map $http_upgrade $connection_upgrade {default upgrade;'' close; }server {listen 443;server_name www.example.com; # 改為綁定證書的域名# ssl 配置ssl on;ssl_certificate 1_www.example.com_bundle.crt; # 改為自己申請得到的 crt 文件的名稱ssl_certificate_key 2_www.example.com.key; # 改為自己申請得到的 key 文件的名稱ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;# WebSocket 配置proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection $connection_upgrade;location / {proxy_pass http://127.0.0.1:8765;}}

配置完成后，按?Ctrl + S?保存，并且通知 Nginx 進(jìn)程重新加載配置：

sudo nginx -s reload

測試 WebSocket

打開配套的小程序，點(diǎn)擊?實(shí)驗(yàn)三：WebSocket。進(jìn)入測試頁面后，點(diǎn)擊?連接?按鈕，如果出現(xiàn)連接成功的提示，表示 WebSocket 服務(wù)已經(jīng)正常運(yùn)行，可以收發(fā)消息。

剪刀石頭布小游戲

任務(wù)時(shí)間：45min ~ 90min

實(shí)現(xiàn)游戲房間邏輯

創(chuàng)建 /data/release/webapp/game 目錄用于存放剪刀石頭布小游戲的代碼

sudo mkdir -p /data/release/webapp/game

添加 game/Room.js 實(shí)現(xiàn)游戲房間邏輯[?]

cd /data/release/webapp/game sudo touch Room.js sudo chmod a+rw Room.js

修改 game/Room.js，可參考下面的代碼：

示例代碼：/data/release/webapp/game/Room.js

/** enum GameChoice {// 剪刀Scissors = 1,// 石頭Rock = 2,// 布Paper = 3 } */ function judge(choice1, choice2) {// 和局if (choice1 == choice2) return 0;// Player 1 沒出，Player 2 勝出if (!choice1) return 1;// Player 2 沒出，Player 1 勝出if (!choice2) return -1;// 都出了就這么算return (choice1 - choice2 + 3) % 3 == 1 ? -1 : 1; }/** @type {Room[]} */ const globalRoomList = [];// 每個(gè)房間最多兩人 const MAX_ROOT_MEMBER = 2;// 游戲時(shí)間，單位秒 const GAME_TIME = 3;let nextRoomId = 0;/** 表示一個(gè)房間 */ module.exports = class Room {/** 獲取所有房間 */static all() {return globalRoomList.slice();}/** 獲取有座位的房間 */static findRoomWithSeat() {return globalRoomList.find(x => !x.isFull());}/** 創(chuàng)建新房間 */static create() {const room = new Room();globalRoomList.unshift(room);return room;}constructor() {this.id = `room${nextRoomId++}`;this.players = [];}/** 添加玩家 */addPlayer(player) {const { uid, uname } = player.user;console.log(`Player ${uid}(${uname}) enter ${this.id}`);this.players.push(player);if (this.isFull()) {this.startGame();}}/** 刪除玩家 */removePlayer(player) {const { uid, uname } = player.user;console.log(`Player ${uid}(${uname}) leave ${this.id}`);const playerIndex = this.players.indexOf(player);if (playerIndex != -1) {this.players.splice(playerIndex, 1);}if (this.players.length === 0) {console.log(`Room ${this.id} is empty now`);const roomIndex = globalRoomList.indexOf(this);if (roomIndex > -1) {globalRoomList.splice(roomIndex, 1);}}}/** 玩家已滿 */isFull() {return this.players.length == MAX_ROOT_MEMBER;}/** 開始游戲 */startGame() {// 保留這行日志輸出可以讓實(shí)驗(yàn)室檢查到實(shí)驗(yàn)的完成情況console.log('game started!');// 當(dāng)局積分清零this.players.forEach(player => player.gameData.roundScore = 0);// 集合玩家用戶和游戲數(shù)據(jù)const players = this.players.map(player => Object.assign({}, player.user, player.gameData));// 通知所有玩家開始for (let player of this.players) {player.send('start', {gameTime: GAME_TIME,players});}// 計(jì)時(shí)結(jié)束setTimeout(() => this.finishGame(), GAME_TIME * 1000);}/** 結(jié)束游戲 */finishGame() {const players = this.players;// 兩兩對比算分for (let i = 0; i < MAX_ROOT_MEMBER; i++) {let p1 = players[i];if (!p1) break;for (let j = i + 1; j < MAX_ROOT_MEMBER; j++) {let p2 = players[j];const result = judge(p1.gameData.choice, p2.gameData.choice);p1.gameData.roundScore -= result;p2.gameData.roundScore += result;}}// 計(jì)算連勝獎(jiǎng)勵(lì)for (let player of players) {const gameData = player.gameData;// 勝局積分if (gameData.roundScore > 0) {gameData.winStreak++;gameData.roundScore *= gameData.winStreak;}// 敗局清零else if (gameData.roundScore < 0) {gameData.roundScore = 0;gameData.winStreak = 0;}// 累積總分gameData.totalScore += gameData.roundScore;}// 計(jì)算結(jié)果const result = players.map(player => {const { uid } = player.user;const { roundScore, totalScore, winStreak, choice } = player.gameData;return { uid, roundScore, totalScore, winStreak, choice };});// 通知所有玩家游戲結(jié)果for (let player of players) {player.send('result', { result });}} }

處理游戲開始、計(jì)算結(jié)果、積分等邏輯

實(shí)現(xiàn)玩家邏輯

添加 game/Player.js

cd /data/release/webapp/game sudo touch Player.js sudo chmod a+rw Player.js

修改 game/Player.js，實(shí)現(xiàn)玩家邏輯[?]，可參考下面的代碼：

示例代碼：/data/release/webapp/game/Player.js

const Room = require("./Room");/*** 表示一個(gè)玩家，處理玩家的公共游戲邏輯，消息處理部分需要具體的玩家實(shí)現(xiàn)（請參考 ComputerPlayer 和 HumanPlayer）*/ module.exports = class Player {constructor(user) {this.id = user.uid;this.user = user;this.room = null;this.gameData = {// 當(dāng)前的選擇（剪刀/石頭/布）choice: null,// 局積分roundScore: 0,// 總積分totalScore: 0,// 連勝次數(shù)winStreak: 0};}/*** 上線當(dāng)前玩家，并且異步返回給玩家分配的房間*/online(room) {// 處理玩家 'join' 消息// 為玩家尋找一個(gè)可用的房間，并且異步返回this.receive('join', () => {if (this.room) {this.room.removePlayer(this);}room = this.room = room || Room.findRoomWithSeat() || Room.create();room.addPlayer(this);});// 處理玩家 'choise' 消息// 需要記錄玩家當(dāng)前的選擇，并且通知到房間里的其它玩家this.receive('choice', ({ choice }) => {this.gameData.choice = choice;this.broadcast('movement', {uid: this.user.uid,movement: "choice"});});// 處理玩家 'leave' 消息// 讓玩家下線this.receive('leave', () => this.offline);}/*** 下線當(dāng)前玩家，從房間離開*/offline() {if (this.room) {this.room.removePlayer(this);this.room = null;}this.user = null;this.gameData = null;}/*** 發(fā)送指定消息給當(dāng)前玩家，需要具體子類實(shí)現(xiàn)* @abstract* @param {string} message 消息類型* @param {*} data 消息數(shù)據(jù)*/send(message, data) {throw new Error('Not implement: AbstractPlayer.send()');}/*** 處理玩家發(fā)送的消息，需要具體子類實(shí)現(xiàn)* @abstract* @param {string} message 消息類型* @param {Function} handler*/receive(message, handler) {throw new Error('Not implement: AbstractPlayer.receive()');}/*** 給玩家所在房間里的其它玩家發(fā)送消息* @param {string} message 消息類型* @param {any} data 消息數(shù)據(jù)*/broadcast(message, data) {if (!this.room) return;this.others().forEach(neighbor => neighbor.send(message, data));}/*** 獲得玩家所在房間里的其他玩家*/others() {return this.room.players.filter(player => player != this);} }

處理玩家加入游戲、選擇出拳、通知其他玩家等邏輯

實(shí)現(xiàn)電腦玩家

在實(shí)現(xiàn)人類玩家之前，我們先來創(chuàng)建 ComputerPlayer.js 來實(shí)現(xiàn)電腦玩家[?]

cd /data/release/webapp/game sudo touch ComputerPlayer.js sudo chmod a+rw ComputerPlayer.js

修改 ComputerPlayer.js?實(shí)現(xiàn)電腦玩家

示例代碼：/data/release/webapp/game/ComputerPlayer.js

const EventEmitter = require('events'); const Player = require('./Player');let nextComputerId = 0;/*** 機(jī)器人玩家實(shí)現(xiàn)，使用 EventEmitter 接收和發(fā)送消息*/ module.exports = class ComputerPlayer extends Player {constructor() {const computerId = `robot-${++nextComputerId}`;super({uid: computerId,uname: computerId,uavatar: 'http://www.scoutiegirl.com/wp-content/uploads/2015/06/Blue-Robot.png'});this.emitter = new EventEmitter();}/*** 模擬玩家行為*/simulate() {this.receive('start', () => this.play());this.receive('result', () => this.stop());this.send('join');}/*** 游戲開始后，隨機(jī)時(shí)間后隨機(jī)選擇*/play() {this.playing = true;const randomTime = () => Math.floor(100 + Math.random() * 2000);const randomChoice = () => {if (!this.playing) return;this.send("choice", {choice: Math.floor(Math.random() * 10000) % 3 + 1});setTimeout(randomChoice, randomTime());}setTimeout(randomChoice, 10);}/*** 游戲結(jié)束后，標(biāo)記起來，阻止繼續(xù)隨機(jī)選擇*/stop() {this.playing = false;}/*** 發(fā)送消息給當(dāng)前玩家，直接轉(zhuǎn)發(fā)到 emitter*/send(message, data) {this.emitter.emit(message, data);}/*** 從當(dāng)前的 emitter 處理消息*/receive(message, handle) {this.emitter.on(message, handle);} }

測試游戲邏輯的時(shí)候，可能沒有其它人可以一起參與，實(shí)現(xiàn)一個(gè)電腦玩家是不錯(cuò)的選擇

實(shí)現(xiàn)人類玩家

人類玩家通過 WebSocket 信道來實(shí)現(xiàn)玩家的輸入輸出[?]，我們需要添加 game/Tunnel.js 和 game/HumanPlayer.js 來實(shí)現(xiàn)人類玩家邏輯，可參考下面的代碼：

cd /data/release/webapp/game sudo touch Tunnel.js sudo touch HumanPlayer.js sudo chmod a+rw Tunnel.js sudo chmod a+rw HumanPlayer.js

修改 game/Tunnel.js 文件

示例代碼：/data/release/webapp/game/Tunnel.js

const EventEmitter = require('events');/*** 封裝 WebSocket 信道*/ module.exports = class Tunnel {constructor(ws) {this.emitter = new EventEmitter();this.ws = ws;ws.on('message', packet => {try {// 約定每個(gè)數(shù)據(jù)包格式：{ message: 'type', data: any }const { message, data } = JSON.parse(packet);this.emitter.emit(message, data);} catch (err) {console.log('unknown packet: ' + packet);}});}on(message, handle) {this.emitter.on(message, handle);}emit(message, data) {this.ws.send(JSON.stringify({ message, data }));} }

修改 game/HumanPlayer.js 文件

示例代碼：/data/release/webapp/game/HumanPlayer.js

const co = require('co'); const Player = require('./Player'); const ComputerPlayer = require('./ComputerPlayer'); const Tunnel = require('./Tunnel');/*** 人類玩家實(shí)現(xiàn)，通過 WebSocket 信道接收和發(fā)送消息*/ module.exports = class HumanPlayer extends Player {constructor(user, ws) {super(user);this.ws = ws;this.tunnel = new Tunnel(ws);this.send('id', user);}/*** 人類玩家上線后，還需要監(jiān)聽信道關(guān)閉，讓玩家下線*/online(room) {super.online(room);this.ws.on('close', () => this.offline());// 人類玩家請求電腦玩家this.receive('requestComputer', () => {const room = this.room;while(room && !room.isFull()) {const computer = new ComputerPlayer();computer.online(room);computer.simulate();}});}/*** 下線后關(guān)閉信道*/offline() {super.offline();if (this.ws && this.ws.readyState == this.ws.OPEN) {this.ws.close();}this.ws = null;this.tunnel = null;if (this.room) {// 清理房間里面的電腦玩家for (let player of this.room.players) {if (player instanceof ComputerPlayer) {this.room.removePlayer(player);}}this.room = null;}}/*** 通過 WebSocket 信道發(fā)送消息給玩家*/send(message, data) {this.tunnel.emit(message, data);}/*** 從 WebSocket 信道接收玩家的消息*/receive(message, callback) {this.tunnel.on(message, callback);} }

人類玩家和電腦玩家的邏輯是一致的，但是 IO 不同，人類玩家使用之前實(shí)現(xiàn)的 WebSocket 服務(wù)進(jìn)行輸入輸出，而電腦玩家直接使用 EventEmiter 處理

添加游戲服務(wù)入口

游戲的實(shí)現(xiàn)已經(jīng)完成了，接下來，編輯 websocket.js?添加服務(wù)入口，可參考下面的代碼：

示例代碼：/data/release/webapp/websocket.js

// 引入 url 模塊用于解析 URL const url = require('url'); // 引入 ws 支持 WebSocket 的實(shí)現(xiàn) const ws = require('ws'); // 引入人類玩家 const HumanPlayer = require('./game/HumanPlayer');// 導(dǎo)出處理方法 exports.listen = listen;/*** 在 HTTP Server 上處理 WebSocket 請求* @param {http.Server} server* @param {wafer.SessionMiddleware} sessionMiddleware*/ function listen(server, sessionMiddleware) {// 使用 HTTP Server 創(chuàng)建 WebSocket 服務(wù)，使用 path 參數(shù)指定需要升級為 WebSocket 的路徑const wss = new ws.Server({ server });// 同時(shí)支持 /ws 和 /game 的 WebSocket 連接請求 wss.shouldHandle = (request) => { const path = url.parse(request.url).pathname; request.path = path; return ['/ws', '/game'].indexOf(path) > -1; }; // 監(jiān)聽 WebSocket 連接建立wss.on('connection', (ws, request) => {// request: 要升級到 WebSocket 協(xié)議的 HTTP 連接// 被升級到 WebSocket 的請求不會(huì)被 express 處理，// 需要使用會(huì)話中間節(jié)獲取會(huì)話sessionMiddleware(request, null, () => {const session = request.session;if (!session) {// 沒有獲取到會(huì)話，強(qiáng)制斷開 WebSocket 連接ws.send(JSON.stringify(request.sessionError) || "No session avaliable");ws.close();return;}console.log(`WebSocket client connected with openId=${session.userInfo.openId}`);// 根據(jù)請求的地址進(jìn)行不同處理 switch (request.path) { case '/ws': return serveMessage(ws, session.userInfo); case '/game': return serveGame(ws, session.userInfo); default: return ws.close();}});});// 監(jiān)聽 WebSocket 服務(wù)的錯(cuò)誤wss.on('error', (err) => {console.log(err);}); }/*** 進(jìn)行簡單的 WebSocket 服務(wù)，對于客戶端發(fā)來的所有消息都回復(fù)回去*/ function serveMessage(ws, userInfo) {// 監(jiān)聽客戶端發(fā)來的消息ws.on('message', (message) => {console.log(`WebSocket received: ${message}`);ws.send(`Server: Received(${message})`);});// 監(jiān)聽關(guān)閉事件ws.on('close', (code, message) => {console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);});// 連接后馬上發(fā)送 hello 消息給會(huì)話對應(yīng)的用戶ws.send(`Server: 恭喜，${userInfo.nickName}`); }/*** 使用 WebSocket 進(jìn)行游戲服務(wù)*/ function serveGame(ws, userInfo) {const user = { uid: userInfo.openId, uname: userInfo.nickName, uavatar: userInfo.avatarUrl }; // 創(chuàng)建玩家 const player = new HumanPlayer(user, ws); // 玩家上線player.online(); }

安裝 co 模塊

我們的源碼中使用到了 co 進(jìn)行協(xié)程管理，啟動(dòng)游戲服務(wù)前，需要先安裝：

cd /data/release/webapp sudo npm install co --save

測試游戲服務(wù)

重啟 Node 服務(wù)：

pm2 restart app

打開配套的小程序，點(diǎn)擊?實(shí)驗(yàn)四 - 剪刀石頭布小游戲，點(diǎn)擊?開始?按鈕進(jìn)行游戲。

完成實(shí)驗(yàn)

恭喜！您已經(jīng)完成了小程序服務(wù)的全部實(shí)驗(yàn)內(nèi)容！你可以選擇保留已經(jīng)運(yùn)行的服務(wù)，繼續(xù)進(jìn)行小程序的學(xué)習(xí)研究，建議留用機(jī)器。

總結(jié)

以上是生活随笔為你收集整理的基于 Ubuntu 搭建微信小程序服务的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。