前言
關鍵詞: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. `});`
三、小結
1、下載Node.js,GitHub搜索express,使用nodejs安裝express(npm install express)。
2、參考GitHub搭建一個httpserver。
3、客戶端調用http.js中的get方法發送http請求,請求服務器,得到一個隨機數。