基於 CentOS 搭建微信小程式服務

阿新 • • 發佈：2022-04-28

小程式無疑是今年網際網路的重大熱點。本實驗帶您從零開始，基於 NodeJS 搭建起一個可以支撐小程式執行的服務，包括 HTTPS 部署、會話服務、WebSocket 服務，最後利用這些服務實現一個實時的剪刀石頭布小遊戲。

任務大綱

1 st 準備域名和證書耗時：20min ~ 40min
2 nd 搭建小程式開發環境耗時：15min ~ 30min
3 rd 搭建 HTTP 服務耗時：15min ~ 30min
4 th 搭建 HTTPS 服務耗時：15min ~ 30min
5 th 小程式會話耗時：45min ~ 90min

6 th WebSocket 服務耗時：45min ~ 90min
7 th 剪刀石頭布小遊戲耗時：45min ~ 90min

準備域名和證書

任務時間：20min ~ 40min

小程式後臺服務需要通過 HTTPS 訪問，在實驗開始之前，我們要準備域名和 SSL 證書。

域名註冊

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

視訊 - 在騰訊雲上購買域名

域名解析

域名購買完成後, 需要將域名解析到實驗雲主機上，實驗雲主機的 IP 為：

<您的 CVM IP 地址>

在騰訊雲購買的域名，可以到控制檯新增解析記錄，過程可參考下面的視訊：

視訊 - 如何在騰訊雲上解析域名

域名設定解析後需要過一段時間才會生效，通過 ping 命令檢查域名是否生效 [?]，如：

ping www.yourmpdomain.com

如果 ping 命令返回的資訊中含有你設定的解析的 IP 地址，說明解析成功。

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

申請 SSL 證書

騰訊雲提供了 SSL 證書的免費申請，申請方式可參考下面視訊：

視訊 - 在騰訊雲上申請 SSL 證書

申請提交後，審批結果會以簡訊的形式通知。審批通過後，可以到 SSL 控制檯下載您的證書檔案，可參考下面的視訊：

視訊 - 在騰訊雲上下載 SSL 證書

搭建小程式開發環境

任務時間：15min ~ 30min

在開始搭建我們的小程式伺服器之前，需要先完成客戶端小程式開發環境的搭建。

註冊開發者賬號

如果你還不是小程式開發者，請先在微信公眾平臺並註冊：

https://mp.weixin.qq.com

具體註冊流程可參考如下視訊：

視訊 - 註冊開發者賬號

若您已註冊，請點選下一步。

配置小程式伺服器資訊

登入微信公眾平臺後，依次進入 設定 - 開發設定 - 伺服器域名 - 修改。

掃碼完成身份校驗後，request 合法域名和 socket 合法域名均填寫在上一步準備好的域名地址。

配置完成後，點選 儲存並提交。您可以點選如下視訊檢視如何進行配置：

視訊 - 配置小程式伺服器資訊

執行配套小程式程式碼

要執行本實驗配套的小程式程式碼，請下載下列資源：

原始碼下載後，請解壓到本地工作目錄。

開發工具下載後，請安裝並啟動，然後用微信掃碼登入。

登入後，選擇 本地小程式專案 - 新增專案，使用以下配置：

AppID：填寫小程式的 AppID，請登入公眾平臺後在 設定 - 開發設定 - 開發者 ID 中檢視
專案名稱：填寫任意您喜歡的名稱
專案目錄：選擇剛才解壓的配套原始碼目錄（目錄包含 app.js）

填寫完成後，點選 新增專案。具體操作可檢視如下視訊：

視訊 - 執行配套小程式程式碼

設定實驗域名

在開發工具的 編輯 面板中，選中 app.js 進行編輯，需要修改小程式通訊域名[?]，請參考下面的配置：

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

當然，這步操作也錄製了對應的視訊：

視訊 - 設定實驗域名

實驗配套原始碼所用通訊域名都會使用該設定，為了您順利進行實驗，請把域名修改為之前步驟準備的域名

搭建 HTTP 服務

任務時間：15min ~ 30min

下面的步驟，將帶大家在伺服器上使用 Node 和 Express 搭建一個 HTTP 伺服器

安裝 NodeJS 和 NPM

使用下面的命令安裝 NodeJS 和 NPM

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install nodejs -y

安裝完成後，使用下面的命令測試安裝結果

node -v

編寫 HTTP Server 原始碼

建立工作目錄

使用下面的命令在伺服器建立一個工作目錄：

mkdir -p /data/release/weapp

進入此工作目錄

cd /data/release/weapp

建立 package.json

在剛才建立的工作目錄建立 package.json，新增我們伺服器包的名稱和版本號，可參考下面的示例。

示例程式碼：/data/release/weapp/package.json

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

完成後，使用 Ctrl + S 儲存檔案

新增 Server 原始碼

在工作目錄建立 app.js，使用 Express.js 來監聽 8765 埠[?]，可參考下面的示例程式碼。

示例程式碼：/data/release/weapp/app.js

// 引用 express 來支援 HTTP Server 的實現
const express = require('express');

// 建立一個 express 例項
const app = express();

// 實現唯一的一箇中間件，對於所有請求，都輸出 "Response from express"
app.use((request, response, next) => {
    response.write('Response from express');
    response.end();
});

// 監聽埠，等待連線
const port = 8765;
app.listen(port);

// 輸出伺服器啟動日誌
console.log(`Server listening at http://127.0.0.1:${port}`);

本實驗會以 8765 埠的開啟作為實驗步驟完成的依據，為了後面的實驗步驟順利進行，請不要使用其它埠號

執行 HTTP 服務

安裝 PM2

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

npm install pm2 --global

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

安裝 Express

我們的伺服器原始碼裡使用到了 Express 模組，下面的命令使用 NPM 來安裝 Express

cd /data/release/weapp
npm install express --save

啟動服務

安裝完成後，使用 PM2 來啟動 HTTP 服務

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

現在，您的 HTTP 服務已經在 http://<您的 CVM IP 地址>:8765 執行

要檢視服務輸出的日誌，可以使用下面的命令：

pm2 logs

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

pm2 restart app

我們使用 PM2 來進行 Node 程序的執行、監控和管理

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

搭建 HTTPS 服務

任務時間：15min ~ 30min

微信小程式要求和伺服器的通訊都通過 HTTPS 進行

安裝 Nginx

在 CentOS 上，可直接使用 yum 來安裝 Nginx

yum install nginx -y

安裝完成後，使用 nginx 命令啟動 Nginx：

nginx

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

如果無法訪問，請重試用 nginx -s reload 命令重啟 Nginx

配置 HTTPS 反向代理

外網使用者訪問伺服器的 Web 服務由 Nginx 提供，Nginx 需要配置反向代理才能使得 Web 服務轉發到本地的 Node 服務。

先將之前下載的 SSL 證書(解壓後 Nginx 目錄分別以 crt 和 key 作為字尾的檔案)通過拖動到左側檔案瀏覽器/etc/nginx目錄的方式來上傳檔案到伺服器上

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

Nginx 配置目錄在 /etc/nginx/conf.d，我們在該目錄建立 ssl.conf

示例程式碼：/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 重新載入配置使其生效：

nginx -s reload

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

在小程式中測試 HTTPS 訪問

開啟配套的小程式，點選 實驗一：HTTPS，點選 傳送請求 來測試訪問結果。

如果伺服器響應成功，請點選下一步。

小程式會話

任務時間：45min ~ 90min

小程式不支援 Cookie 儲存和跟蹤，伺服器需要自行實現會話層

安裝 MongoDB

使用 Yum 在機器上安裝 [MongoDB] 及其客戶端命令列工具：

yum install mongodb-server mongodb -y

安裝結束後，可以使用下面的命令檢視安裝的版本：

mongod --version
mongo --version

MongoDB 是一款 NoSQL 資料庫，支援 JSON 格式的結構化文件儲存和查詢，對 JavaScript 有著友好的支援

啟動 MongoDB

建立目錄，用於 MongoDB 資料和日誌儲存：

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

建立後，使用下面的命令來啟動 MongoDB：[?]

mongod --fork --dbpath /data/mongodb --logpath /data/logs/mongodb/weapp.log

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

netstat -ltp | grep 27017

MongoDB 首次啟動可能會花費大概 1min 時間，請耐心等待

MongoDB 預設監聽 27017 埠等待連線，下面的命令檢視當前 27017 埠被哪個程序佔用，如果是 MongoDB 的程序，則表示啟動成功。

新增 MongoDB 使用者

登入本地 MongoDB 服務：

mongo

登入後，建立一個使用者 weapp [?]：

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

建立完成後，使用 exit 退出命令列工具。

建立的使用者和密碼將用於下一步中連線資料庫時使用，如果使用不同的使用者或密碼，注意要儲存好

安裝 Node 模組

實現小程式的會話功能，我們需要安裝 [connect-mongo] 和 [wafer-node-session]

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

[connect-mongo][https://github.com/jdesboeufs/connect-mongo] 模組通過連線到 MongoDB 為會話提供儲存

[wafer-node-session][https://github.com/tencentyun/wafer-node-session] 是由騰訊雲提供的獨立小程式會話管理中介軟體

實現小程式會話

在工作目錄建立配置檔案 config.js，用於儲存我們服務所用的配置[?]，可參考下面的實現(注：請將參考配置檔案中的 YORU_APP_ID 和 YOUR_APP_SECRET 替換為你申請的小程式對應的 AppID 和 AppSecret)：

示例程式碼：/data/release/weapp/config.js

module.exports = { 
    serverPort: '8765', 

    // 小程式 appId 和 appSecret 
    // 請到 https://mp.weixin.qq.com 獲取 AppID 和 AppSecret
    appId: 'YORU_APP_ID', 
    appSecret: 'YOUR_APP_SECRET', 

    // mongodb 連線配置，生產環境請使用更復雜的使用者名稱密碼
    mongoHost: '127.0.0.1', 
    mongoPort: '27017', 
    mongoUser: 'weapp', 
    mongoPass: 'weapp-dev', 
    mongoDb: 'weapp'
};

編輯 app.js，新增會話實現邏輯，可參考下面的程式碼：

示例程式碼：/data/release/weapp/app.js

// 引用 express 來支援 HTTP Server 的實現
const express = require('express');
// 引用 wafer-session 支援小程式會話
const waferSession = require('wafer-node-session'); 
// 使用 MongoDB 作為會話的儲存
const MongoStore = require('connect-mongo')(waferSession); 
// 引入配置檔案
const config = require('./config'); 

// 建立一個 express 例項
const app = express();

// 新增會話中介軟體，登入地址是 /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 下，輸出會話裡包含的使用者資訊
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}`);
    }
}); 

// 實現一箇中間件，對於未處理的請求，都輸出 "Response from express"
app.use((request, response, next) => {
    response.write('Response from express');
    response.end();
});

// 監聽埠，等待連線
app.listen(config.serverPort);

// 輸出伺服器啟動日誌
console.log(`Server listening at http://127.0.0.1:${config.serverPort}`);

原始碼編寫完成後，重啟服務：

pm2 restart app

重啟後，使用配套的小程式完成會話測試：開啟配套小程式 - 點選 實驗二：會話 - 獲取會話，如果您能看到您的微信頭像，那就表示會話已經成功獲取了。

隨著服務變得複雜，我們可以把配置集中起來方便管理，比如目前我們需要儲存：伺服器執行埠、小程式配置、MongoDB 連線配置

WebSocket 服務

任務時間：45min ~ 90min

安裝 Node 模組

本實驗使用 ws 模組來在伺服器上支援 WebSocket 協議，下面使用 NPM 來安裝：

cd /data/release/weapp
npm install ws --save

實現 WebSocket 伺服器

建立 websocket.js，實現 WebSocket 服務，可參考下面的程式碼：

示例程式碼：/data/release/weapp/websocket.js

// 引入 ws 支援 WebSocket 的實現
const ws = require('ws');

// 匯出處理方法
exports.listen = listen;

/**
 * 在 HTTP Server 上處理 WebSocket 請求
 * @param {http.Server} server
 * @param {wafer.SessionMiddleware} sessionMiddleware
 */
function listen(server, sessionMiddleware) {
    // 使用 HTTP Server 建立 WebSocket 服務，使用 path 引數指定需要升級為 WebSocket 的路徑
    const wss = new ws.Server({ server, path: '/ws' });

    // 監聽 WebSocket 連線建立
    wss.on('connection', (ws,request) => {// 要升級到 WebSocket 協議的 HTTP 連線

        // 被升級到 WebSocket 的請求不會被 express 處理，
        // 需要使用會話中間節獲取會話
        sessionMiddleware(request, null, () => {
            const session = request.session;
            if (!session) {
                // 沒有獲取到會話，強制斷開 WebSocket 連線
                ws.send(JSON.stringify(request.sessionError) || "No session avaliable");
                ws.close();
                return;
            }
            // 保留這個日誌的輸出可讓實驗室能檢查到當前步驟是否完成
            console.log(`WebSocket client connected with openId=${session.userInfo.openId}`);
            serveMessage(ws, session.userInfo);
        });
    });

    // 監聽 WebSocket 服務的錯誤
    wss.on('error', (err) => {
        console.log(err);
    });
}

/**
 * 進行簡單的 WebSocket 服務，對於客戶端發來的所有訊息都回復回去
 */
function serveMessage(ws, userInfo) {
    // 監聽客戶端發來的訊息
    ws.on('message', (message) => {
        console.log(`WebSocket received: ${message}`);
        ws.send(`Server: Received(${message})`);
    });

    // 監聽關閉事件
    ws.on('close', (code, message) => {
        console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);
    });

    // 連線後馬上傳送 hello 訊息給會話對應的使用者
    ws.send(`Server: 恭喜，${userInfo.nickName}`);
}

編輯 app.js，呼叫 WebSocket 服務，可參考下面程式碼：

示例程式碼：/data/release/weapp/app.js

// HTTP 模組同時支援 Express 和 WebSocket
const http = require('http'); 
// 引用 express 來支援 HTTP Server 的實現
const express = require('express');
// 引用 wafer-session 支援小程式會話
const waferSession = require('wafer-node-session'); 
// 使用 MongoDB 作為會話的儲存
const MongoStore = require('connect-mongo')(waferSession); 
// 引入配置檔案
const config = require('./config'); 
// 引入 WebSocket 服務實現
const websocket = require('./websocket');

// 建立一個 express 例項
const app = express();

// 獨立出會話中介軟體給 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 下，輸出會話裡包含的使用者資訊
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}`);
    }
}); 

// 實現一箇中間件，對於未處理的請求，都輸出 "Response from express"
app.use((request, response, next) => {
    response.write('Response from express');
    response.end();
});

// 建立 HTTP Server 而不是直接使用 express 監聽
const server = http.createServer(app);

// 讓 WebSocket 服務在建立的 HTTP 伺服器上監聽
websocket.listen(server, sessionMiddleware);

// 啟動 HTTP 服務
server.listen(config.serverPort);

// 輸出伺服器啟動日誌
console.log(`Server listening at http://127.0.0.1:${config.serverPort}`);

修改完成後，按 Ctrl + S 儲存檔案，並重啟服務：

pm2 restart app

更新 Nginx 代理

編輯 Nginx 配置 ssl.conf，新增 WebSocket 支援，可參考下面的配置(注：請將參考配置檔案中的 www.example.com 替換為前面步驟申請的域名，將 1_www.example.com.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.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 程序重新載入配置：

nginx -s reload

測試 WebSocket

開啟配套的小程式，點選 實驗三：WebSocket。進入測試頁面後，點選 連線 按鈕，如果出現連線成功的提示，表示 WebSocket 服務已經正常執行，可以收發訊息。

剪刀石頭布小遊戲

任務時間：45min ~ 90min

實現遊戲房間邏輯

建立 /data/release/weapp/game 目錄用於存放剪刀石頭布小遊戲的程式碼

mkdir -p /data/release/weapp/game

新增 game/Room.js 實現遊戲房間邏輯[?]，可參考下面的程式碼：

示例程式碼：/data/release/weapp/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 = [];

// 每個房間最多兩人
const MAX_ROOT_MEMBER = 2;

// 遊戲時間，單位秒
const GAME_TIME = 3;

let nextRoomId = 0;

/** 表示一個房間 */
module.exports = class Room {

    /** 獲取所有房間 */
    static all() {
        return globalRoomList.slice();
    }

    /** 獲取有座位的房間 */
    static findRoomWithSeat() {
        return globalRoomList.find(x => !x.isFull());
    }

    /** 建立新房間 */
    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() {
        // 保留這行日誌輸出可以讓實驗室檢查到實驗的完成情況
        console.log('game started!');

        // 當局積分清零
        this.players.forEach(player => player.gameData.roundScore = 0);

        // 集合玩家使用者和遊戲資料
        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
            });
        }

        // 計時結束
        setTimeout(() => this.finishGame(), GAME_TIME * 1000);
    }

    /** 結束遊戲 */
    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;
            }
        }
        // 計算連勝獎勵
        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;
        }
        // 計算結果
        const result = players.map(player => {
            const { uid } = player.user;
            const { roundScore, totalScore, winStreak, choice } = player.gameData;
            return { uid, roundScore, totalScore, winStreak, choice };
        });
        // 通知所有玩家遊戲結果
        for (let player of players) {
            player.send('result', { result });
        }
    }
}

處理遊戲開始、計算結果、積分等邏輯

實現玩家邏輯

新增 game/Player.js 實現玩家邏輯[?]，可參考下面的程式碼：

示例程式碼：/data/release/weapp/game/Player.js

const Room = require("./Room");

/**
 * 表示一個玩家，處理玩家的公共遊戲邏輯，訊息處理部分需要具體的玩家實現（請參考 ComputerPlayer 和 HumanPlayer）
 */
module.exports = class Player {
    constructor(user) {
        this.id = user.uid;
        this.user = user;
        this.room = null;
        this.gameData = {
            // 當前的選擇（剪刀/石頭/布）
            choice: null,
            // 局積分
            roundScore: 0,
            // 總積分
            totalScore: 0,
            // 連勝次數
            winStreak: 0
        };
    }

    /**
     * 上線當前玩家，並且非同步返回給玩家分配的房間
     */
    online(room) {
        // 處理玩家 'join' 訊息
        // 為玩家尋找一個可用的房間，並且非同步返回
        this.receive('join', () => {
            if (this.room) {
                this.room.removePlayer(this);
            }
            room = this.room = room || Room.findRoomWithSeat() || Room.create();
            room.addPlayer(this);
        });

        // 處理玩家 'choise' 訊息
        // 需要記錄玩家當前的選擇，並且通知到房間裡的其它玩家
        this.receive('choice', ({ choice }) => {
            this.gameData.choice = choice;
            this.broadcast('movement', {
                uid: this.user.uid,
                movement: "choice"
            });
        });

        // 處理玩家 'leave' 訊息
        // 讓玩家下線
        this.receive('leave', () => this.offline);
    }

    /**
     * 下線當前玩家，從房間離開
     */
    offline() {
        if (this.room) {
            this.room.removePlayer(this);
            this.room = null;
        }
        this.user = null;
        this.gameData = null;
    }

    /**
     * 傳送指定訊息給當前玩家，需要具體子類實現
     * @abstract
     * @param {string} message 訊息型別
     * @param {*} data 訊息資料
     */
    send(message, data) {
        throw new Error('Not implement: AbstractPlayer.send()');
    }

    /**
     * 處理玩家傳送的訊息，需要具體子類實現
     * @abstract
     * @param {string} message 訊息型別
     * @param {Function} handler
     */
    receive(message, handler) {
        throw new Error('Not implement: AbstractPlayer.receive()');
    }

    /**
     * 給玩家所在房間裡的其它玩家傳送訊息
     * @param {string} message 訊息型別
     * @param {any} data 訊息資料
     */
    broadcast(message, data) {
        if (!this.room) return;
        this.others().forEach(neighbor => neighbor.send(message, data));
    }

    /**
     * 獲得玩家所在房間裡的其他玩家
     */
    others() {
        return this.room.players.filter(player => player != this);
    }
}

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

實現電腦玩家

在實現人類玩家之前，我們先來建立 ComputerPlayer.js 來實現電腦玩家[?]

示例程式碼：/data/release/weapp/game/ComputerPlayer.js

const EventEmitter = require('events');
const Player = require('./Player');

let nextComputerId = 0;

/**
 * 機器人玩家實現，使用 EventEmitter 接收和傳送訊息
 */
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');
    }

    /**
     * 遊戲開始後，隨機時間後隨機選擇
     */
    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);
    }

    /**
     * 遊戲結束後，標記起來，阻止繼續隨機選擇
     */
    stop() {
        this.playing = false;
    }

    /**
     * 傳送訊息給當前玩家，直接轉發到 emitter
     */
    send(message, data) {
        this.emitter.emit(message, data);
    }

    /**
     * 從當前的 emitter 處理訊息
     */
    receive(message, handle) {
        this.emitter.on(message, handle);
    }
}

測試遊戲邏輯的時候，可能沒有其它人可以一起參與，實現一個電腦玩家是不錯的選擇

實現人類玩家

人類玩家通過 WebSocket 通道來實現玩家的輸入輸出[?]，我們需要新增 game/Tunnel.js 和 game/HumanPlayer.js 來實現人類玩家邏輯，可參考下面的程式碼：

示例程式碼：/data/release/weapp/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 {
                // 約定每個資料包格式：{ 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 }));
    }
}

示例程式碼：/data/release/weapp/game/HumanPlayer.js

const co = require('co');
const Player = require('./Player');
const ComputerPlayer = require('./ComputerPlayer');
const Tunnel = require('./Tunnel');

/**
 * 人類玩家實現，通過 WebSocket 通道接收和傳送訊息
 */
module.exports = class HumanPlayer extends Player {
    constructor(user, ws) {
        super(user);
        this.ws = ws;
        this.tunnel = new Tunnel(ws);
        this.send('id', user);
    }

    /**
     * 人類玩家上線後，還需要監聽通道關閉，讓玩家下線
     */
    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();
            }
        });
    }

    /**
     * 下線後關閉通道
     */
    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 通道傳送訊息給玩家
     */
    send(message, data) {
        this.tunnel.emit(message, data);
    }

    /**
     * 從 WebSocket 通道接收玩家的訊息
     */
    receive(message, callback) {
        this.tunnel.on(message, callback);
    }
}

人類玩家和電腦玩家的邏輯是一致的，但是 IO 不同，人類玩家使用之前實現的 WebSocket 服務進行輸入輸出，而電腦玩家直接使用 EventEmiter 處理

新增遊戲服務入口

遊戲的實現已經完成了，接下來，編輯 websocket.js 新增服務入口，可參考下面的程式碼：

示例程式碼：/data/release/weapp/websocket.js

// 引入 url 模組用於解析 URL
const url = require('url');
// 引入 ws 支援 WebSocket 的實現
const ws = require('ws');
// 引入人類玩家
const HumanPlayer = require('./game/HumanPlayer');

// 匯出處理方法
exports.listen = listen;

/**
 * 在 HTTP Server 上處理 WebSocket 請求
 * @param {http.Server} server
 * @param {wafer.SessionMiddleware} sessionMiddleware
 */
function listen(server, sessionMiddleware) {
    // 使用 HTTP Server 建立 WebSocket 服務，使用 path 引數指定需要升級為 WebSocket 的路徑
    const wss = new ws.Server({ server });

    // 同時支援 /ws 和 /game 的 WebSocket 連線請求 
    wss.shouldHandle = (request) => { 
        const path = url.parse(request.url).pathname; 
        request.path = path; 
        return ['/ws', '/game'].indexOf(path) > -1; 
    }; 

    // 監聽 WebSocket 連線建立
    wss.on('connection', (ws, request) => {
        // request: 要升級到 WebSocket 協議的 HTTP 連線

        // 被升級到 WebSocket 的請求不會被 express 處理，
        // 需要使用會話中間節獲取會話
        sessionMiddleware(request, null, () => {
            const session = request.session;
            if (!session) {
                // 沒有獲取到會話，強制斷開 WebSocket 連線
                ws.send(JSON.stringify(request.sessionError) || "No session avaliable");
                ws.close();
                return;
            }
            console.log(`WebSocket client connected with openId=${session.userInfo.openId}`);

            // 根據請求的地址進行不同處理 
            switch (request.path) { 
                case '/ws': return serveMessage(ws, session.userInfo); 
                case '/game': return serveGame(ws, session.userInfo); 
                default: return ws.close();
            }
        });
    });

    // 監聽 WebSocket 服務的錯誤
    wss.on('error', (err) => {
        console.log(err);
    });
}

/**
 * 進行簡單的 WebSocket 服務，對於客戶端發來的所有訊息都回復回去
 */
function serveMessage(ws, userInfo) {
    // 監聽客戶端發來的訊息
    ws.on('message', (message) => {
        console.log(`WebSocket received: ${message}`);
        ws.send(`Server: Received(${message})`);
    });

    // 監聽關閉事件
    ws.on('close', (code, message) => {
        console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);
    });

    // 連線後馬上傳送 hello 訊息給會話對應的使用者
    ws.send(`Server: 恭喜，${userInfo.nickName}`);
}

/**
 * 使用 WebSocket 進行遊戲服務
 */
function serveGame(ws, userInfo) {
    const user = { 
        uid: userInfo.openId, 
        uname: userInfo.nickName, 
        uavatar: userInfo.avatarUrl 
    }; 
    // 建立玩家 
    const player = new HumanPlayer(user, ws); 
    // 玩家上線
    player.online();
}

安裝 co 模組

我們的原始碼中使用到了 co 進行協程管理，啟動遊戲服務前，需要先安裝：

cd /data/release/weapp
npm install co --save

測試遊戲服務

重啟 Node 服務：

pm2 restart app

開啟配套的小程式，點選 實驗四 - 剪刀石頭布小遊戲，點選 開始 按鈕進行遊戲。

完成實驗

恭喜！您已經完成了小程式服務的全部實驗內容！你可以選擇保留已經執行的服務，繼續進行小程式的學習研究，建議留用機器。

基於 CentOS 搭建微信小程式服務

準備域名和證書

域名註冊

域名解析

申請 SSL 證書

搭建小程式開發環境

註冊開發者賬號

配置小程式伺服器資訊

執行配套小程式程式碼

設定實驗域名

搭建 HTTP 服務

安裝 NodeJS 和 NPM

編寫 HTTP Server 原始碼

建立工作目錄

建立 package.json

新增 Server 原始碼

執行 HTTP 服務

安裝 PM2

安裝 Express

啟動服務

搭建 HTTPS 服務

安裝 Nginx

配置 HTTPS 反向代理

在小程式中測試 HTTPS 訪問

小程式會話

安裝 MongoDB

啟動 MongoDB

新增 MongoDB 使用者

安裝 Node 模組

實現小程式會話

WebSocket 服務

安裝 Node 模組

實現 WebSocket 伺服器

更新 Nginx 代理

測試 WebSocket

剪刀石頭布小遊戲

實現遊戲房間邏輯

實現玩家邏輯

實現電腦玩家

實現人類玩家

新增遊戲服務入口

安裝 co 模組

測試遊戲服務

完成實驗

相關推薦