前言

關鍵詞：NodeJs、express、http伺服器

一、搭建一個http的伺服器1. 什麼是弱聯網

遊戲的主體，不需要網路就能遊戲 → 單機遊戲。

但是為了優化遊戲體驗，培養使用者黏性，通常會設計好友排行、得分、道具、抽獎等環節需要聯網，這些就需要用弱聯網技術來做。

弱聯網技術一般需要訪問伺服器，通常採用http伺服器 ，也就是web伺服器+資料庫。

用什麼技術？

主流的伺服器開發語言，都有http的技術，成熟的應用。Java：Tomcat，Python：tornado，C#：IIS; Node.js中有個 express模組，是輕量級http伺服器。使用JavaScript開發。

2. 搭建http伺服器

(1)安裝Node.js: www.baidu.com --> Node.js --> node -v -->打印出來Node.js版本;

(2)安裝express: express基於Node.js http框架。

百度搜索進入GitHub官網，點選進入，搜尋express，如上圖。然後，點選進入。在磁碟新建一個資料夾webserver，進入此資料夾，按住Shift鍵同時，右擊，選擇【在此處開啟命名視窗】，之後執行命令：npm install express，安裝express。參照https://github.com/expressjs/express

(3)搭建一個http server --> 6行程式碼; 在資料夾webserver中新建main.js檔案，修改檔案內容如下：

1. `var express = require('express'); // creatorApplication: 幫助我們建立一個web app例項;`3. `var app = express(); // app 的例項;`5. `// 百度新聞：國內/file/2020/10/09/20201009115747_10.jpg --->一個站點裡面不同地址;`6. `// 百度欣慰：國際/file/2020/10/09/20201009115748_11.jpg.html `// /file/2020/10/09/20201009115748_12.jpg: 站點: IP(伺服器IP + 域名解析) + 埠;`8. `// 域名 ---》DNS伺服器---》解析得到IP地址;`9. `// /file/2020/10/09/20201009115748_12.jpg ---> http://news.baidu.com:80/`10. `// 站點IP: 127.0.0.1, 埠: 伺服器指定: 8080;`11. `// http://127.0.0.1:8080/`12. `// 地址的響應請求, --->處理函式;`13. `// 地址：響應請求`14. `// http://127.0.0.1:8080/lucky ---> funtion()`15. `// req 客戶端發過來的請求物件，資料都再裡面;`16. `// res: 服務端會資料給客戶端的 物件;`18. `app.get('/lucky', function(req, res) {`19. `var ret = 1+ Math.random() * 7;`20. `ret = Math.floor(ret);`21. `res.send(""+ ret);`22. `});`

app.listen(8080); // 站點埠; 如下圖，在webserver目錄下開啟命令視窗，輸入node .\\main.js啟動抽獎遊戲的後臺服務。然後在瀏覽器位址列輸入localhost:8080/lucky，效果如下：

二、客戶端向http伺服器傳送請求，並展示資料1. 抽獎客戶端傳送請求

在scripts中新建gamemgr.js，新增onsendhttpclick方法，當點選開始按鈕的時候呼叫此方法。將gamemgr使用者自定義指令碼繫結到Canvas上，選中start按鈕節點，修改start開始按鈕節點上的Button元件的Click Events屬性值為1，回車，然後將Canvas拖入，選中gamemgr，選中onsendhttp_click方法。如此，單擊開始按鈕就會呼叫此方法。

1. `var http = require("http");`2. `var lucky_anim = require("lucky_anim");`3. `cc.Class({`4. `extends: cc.Component,`5. `properties: {`6. `disk: {`7. `type: lucky_anim,`8. `default: null,`9. `},`10. `},`11. `// 點選 開始 按鈕，先後臺傳送http請求呼叫服務`12. `on_send_http_click(){`13. `// http標準庫 -- > H5標準 檢視http.js原始碼`14. `http.get("http://127.0.0.1:8080", "/lucky", null, function(err, ret){`15. `if(err){`16. `return;`17. `}`18. `ret = parseInt(ret);`19. `this.show_anim(ret); // 顯示抽獎動畫`20. `}.bind(this));`21. `},`22. `show_anim(ret) { // 顯示抽獎動畫`23. `// 抽獎盤 開始繪製`24. `this.disk.start_lucky_draw(ret);`25. `},`26. `});`

將luckyanim.js繫結到disk節點上（左下圖），設定Canvas繫結的使用者自定義指令碼gamemgr的disk屬性值為disk節點。

2. 跨域訪問問題

跨域訪問:網頁所在地址: http://localhost:7456/;可能不安全的外部網頁; -->伺服器，跨域訪問的問題，伺服器的地址http://127.0.0.1:8080;出於安全考慮，拒絕訪問; -- >收到這個錯誤; 跨域訪問問題。

複製blog程式碼，在main.js中的var app = express();後、傳送請求前，新增如下程式碼：//設定跨域訪問

1. `app.all('*', function(req, res, next) {`2. `res.header("Access-Control-Allow-Origin", "*");`3. `res.header("Access-Control-Allow-Headers", "X-Requested-With");`4. `res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");`5. `res.header("X-Powered-By", ' 3.2.1');`6. `res.header("Content-Type", "application/json;charset=utf-8");`7. `next();`8. `});`

三、小結

1、下載Node.js，GitHub搜尋express，使用nodejs安裝express（npm install express）。2、參考GitHub搭建一個httpserver。3、客戶端呼叫http.js中的get方法傳送http請求，請求伺服器，得到一個隨機數。