基於html5和nodejs結合實作websocket即使通訊

首頁

web前端

js教程

基於html5和nodejs結合實作websocket即使通訊_node.js

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

最近都在學習HTML5，做canvas遊戲之類的，發現HTML5中除了canvas這個強大的工具外，還有WebSocket也很值得注意。可以用來做雙螢幕互動遊戲，何為雙螢幕互動遊戲？就是透過行動裝置來控制PC端網頁遊戲。這樣的話就要用到即時通訊了，而WebSocket無疑是最適合的。 WebSocket相較於HTTP來說，有許多的優點，主要表現在WebSocket只建立一個TCP連接，可以主動推送資料到客戶端，而且還有更輕量的協定頭，減少資料傳送量。所以WebSocket暫時來說是即時通訊的最佳協議了。

　　至於伺服器語言選擇nodeJs，一是因為自己是做前端的，對javascript比較熟悉，相比於其他後台語言，自然會更喜歡nodeJs了，二是NodeJs本身事件驅動的方式很擅長與大量客戶端保持高並發的連線。所以就選NodeJs了。

　　伺服器的實作很簡單，先裝一個nodeJs的模組，叫nodejs-websocket ，直接在nodeJs命令列中敲入：npm install nodejs-websocket回車就可以安裝好了，然後就可以開始建立伺服器了，因為有了nodejs-websocket模組，所以很多工作都不用我們自己做，直接呼叫別人封裝好的方法就行了：

　　【服務端代碼】，根據客戶端傳來的訊息判斷哪個是game1，哪個是game2，保存connection物件。

var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
  conn.on("text", function (str) {
    console.log("收到的信息为:"+str)
    if(str==="game1"){
      game1 = conn;
      game1Ready = true;
      conn.sendText("success");
    }
    if(str==="game2"){
      game2 = conn;
      game2Ready = true;
    }
    if(game1Ready&&game2Ready){
      game2.sendText(str);
    }
    conn.sendText(str)
  })
  conn.on("close", function (code, reason) {
    console.log("关闭连接")
  });
  conn.on("error", function (code, reason) {
    console.log("异常关闭")
  });
}).listen(8001)
console.log("WebSocket建立完毕")

登入後複製

【game1程式碼】：點選取得三個框的內容，傳到伺服器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
    .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
  </style>
</head>
<body>
  <div id="mess">正在连接...</div>
  <div class="kuang">
    <div class="value" id="value1">小明小明</div>
    <div class="value" id="value2">大胸大胸</div>
    <div class="value" id="value3">小张小张</div>
  </div>
  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');
      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game1");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }
      ws.onmessage = function(e){
        mess.innerHTML = "连接成功"
        document.querySelector(".kuang").onclick = function(e){
          var time = new Date();
          ws.send(time + " game1点击了“" + e.target.innerHTML+"”");
        }
      }
    }
  </script>
</body>
</html>

登入後複製

【game2代碼】：取得服務推播來的訊息，並且顯示

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
  </style>
</head>
<body>
  <div id="mess"></div>
  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');
      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game2");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }
      ws.onmessage = function(e){
        var time = new Date();
        mess.innerHTML+=time+"的消息："+e.data+"<br>"
      }
    }
  </script>
</body>
</html>

登入後複製

運行截圖：

程式碼非常簡單：很容易看懂，nodejs-WebSocket的呼叫也非常簡潔明了，具體nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websockethttps://www.npmjs.org/package/nodejs-websocket

，裡面都有介紹，自己測試一下，就很容易了，客戶端的實作也是很簡單，就透過onopen,onmessage等幾個方法就可以實現了。

ps：nodejs缺點

1. nodejs更新很快，可能會出現版本聯相容
2. nodejs不算成熟，還沒有大製作。
3. nodejs不像其他的伺服器，對於不同的連接，不支援進程和執行緒操作。

在權衡Nodejs為我們帶來無限暢快的開發的同時，要考慮到他的不成熟，特別是對於「長連接」的網路通訊應用。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

開始使用Chart.js：PIE，DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。創建餅圖和環形圖餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體