express入門（12）- websocket

1，WebSocket原理

• WebSocket是爲解決客戶端與服務端實時通信而產生的技術。WebSocket是HTML5開始提供的一種在單個 TCP連接上進行全雙工通訊的協議。在WebSocketAPI中，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
• WebSocket API最偉大之處在於服務器和客戶端可以在給定的時間範圍內的任意時刻，相互推送信息。
• 採用websocket技術的頁面不同於普通頁面，而是需要特殊的服務器環境支持。目前支持WebSocket環境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，還有html5 的websocket方案。
• 目前支持WebSocket環境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，還有html5 的websocket方案，但是目前在我國瀏覽器使用情況上，IE用戶還佔有50%左右的市場份額，html5 的websocket只能支持IE10+和其他高端瀏覽器，在兼容性方面socket.io做的很好，所以對於前端工程師，我們優先選Nodejs和socket.io來搭建WebSocket服務器端

2，環境搭建

（1）搭建nodejs環境，搭建express環境
（2）搭建websocket環境

npm install socket.io

npm install nodejs-websocket

（3）搭建[nodejs環境]

2，客戶端編寫

（1）創建 WebSocket 對象

//url:服務器地址
var Socket = new WebSocket(url);

實例：

ws = new WebSocket("ws://192.168.3.105:8080");

（2）WebSocket 事件

open：連接建立時觸發
message：客戶端接收服務端數據時觸發
error：通信發生錯誤時觸發
close：連接關閉時觸發

實例：

ws.onopen = function () {
                console.log("ws open");
            }
ws.onmessage = function (event) {
     //1,創建一個div節點
     var div = document.createElement("div");
     //2,把服務器傳送回來的世界放到div節點
     div.textContent = event.data;
     //3,顯示數據
     document.body.appendChild(div);
}

ws.onclose = function () {
    console.log("ws close");
}
ws.onerror = function () {
    console.error("ws error");
}

（3）WebSocket 方法

Socket.send()：使用連接發送數據

實例：

ws.send("hello");

3，服務器編寫

（1）引入websocket

var ws = require("nodejs-websocket");

（2）創建服務器，實現握手操作（實現互動）

var server = ws.createServer(function (conn) {
  console.log('connection sussess');
  conn.on("text", function (str) {
   server.connections.forEach(function (connection) {
            connection.sendText(str);
    });
  });
});

（3）服務器監聽

server.listen(8080);//設置服務器端口

4，源碼地址