前言

關鍵詞：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.  `// 百度新聞：國內http://news.baidu.com/guoji   --->一個站點裡面不同地址;`

6.  `// 百度欣慰：國際http://news.baidu.com/guonei`

7.  `// http://news.baidu.com/: 站點:  IP(服務器IP + 域名解析) + 端口;`

8.  `// 域名 ---》DNS服務器---》解析得到IP地址;`

9.  `// http://news.baidu.com/ ---> 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.  `});`