Web Socket & Socket.io

gougoujiang 發布于2019-08-21 10:53 / 2979人閱讀

摘要：但是，反過來卻是不可能的服務器端發生了一個事件，服務器無法將這個事件的信息實時主動通知它的客戶端。這種做法是無奈之舉，實際上對服務器客戶端雙方都造成了大量的性能浪費。用于發送，用戶接受。

HTTP

HTTP無法輕松實現實時應用：

HTTP協議是無狀態的，服務器只會響應來自客戶端的請求，但是它與客戶端之間不具備持續連接。

我們可以非常輕松的捕獲瀏覽器上發生的事件（比如用戶點擊了盒子），這個事件可以輕松產生與服務器的數據交互（比如Ajax）。但是，反過來卻是不可能的：服務器端發生了一個事件，服務器無法將這個事件的信息實時主動通知它的客戶端。只有在客戶端查詢服務器的當前狀態的時候，所發生事件的信息才會從服務器傳遞到客戶端。

但是，確實聊天室確實存在

方法：

長輪詢：客戶端每隔很短的時間，都會對服務器發出請求，查看是否有新的消息，只要輪詢速度足夠快，例如1秒，就能給人造成交互是實時進行的印象。這種做法是無奈之舉，實際上對服務器、客戶端雙方都造成了大量的性能浪費。

長連接：客戶端只請求一次，但是服務器會將連接保持，不會返回結果（想象一下我們沒有寫res.end()時，瀏覽器一直轉小菊花）。服務器有了新數據，就將數據發回來，又有了新數據，就將數據發回來，而一直保持掛起狀態。這種做法的也造成了大量的性能浪費。

WebSocket協議

WebSocket協議能夠讓瀏覽器和服務器全雙工實時通信，互相的，服務器也能主動通知客戶端

WebSocket的原理非常的簡單：利用HTTP請求產生握手，HTTP頭部中含有WebSocket協議的請求，所以握手之后，二者轉用TCP協議進行交流（QQ的協議）。現在的瀏覽器和服務器之間，就是QQ和QQ服務器的關系了。所以WebSocket協議，需要瀏覽器支持，更需要服務器支持。

支持WebSocket協議的瀏覽器有：Chrome 4、火狐4、IE10、Safari5

支持WebSocket協議的服務器有：Node 0、Apach7.0.2、Nginx1.3

Socket.IO是業界良心，新手福音。它屏蔽了所有底層細節，讓頂層調用非常簡單。并且還為不支持WebSocket協議的瀏覽器，提供了長輪詢的透明模擬機制。

Node.js上需要寫一些程序，來處理TCP請求。使用require("dgram") 模塊

Node的單線程、非阻塞I/O、事件驅動機制，使它非常適合Socket服務器。

Socket.io

npm install socket.io

制作index.html頁面。頁面中必須引入 /socket.io/socket.io.js, 調用io函數，取得socket對象。

服務器中：

var io = require("sockte.io")(server);
io.on("connection",function( socket ){
    //socket 對象
    socket.on("tiwen",function( msg ){
        console.log("服務器接受到了請求");
        //sockte.emit("huida","ok"); //單條返回
        //廣播 , 就是給當前所有用戶的發送信息。
        io.emit("huida","ok");
    });
});

客戶端和服務器，都有socket對象。兩個對象都具有emit，和on的時間。emit用于發送，on用戶接受。
發送的內容可以是任何類型的值。

案例

前臺頁面：



index頁面
信息內容：
發送：

后臺：

var http = require("http");
var fs = require("fs");

var server = http.createServer(function ( req,res ) {
  if (  req.url == "/" ) {
    // 顯示首頁
    fs.readFile("./index.html",function ( err,data ) {
      res.end(data);
    });
  }
});


// 創建io對象
var io = require("socket.io")(server);

// 監聽連接事件
io.on("connection",function ( socket ) {
  console.log( "一個客戶端連接了" );
  socket.on("tiwen",function ( msg ) {
        // console.log( "提問為：" + msg );
        // socket.emit("huida","好呀");
    // 加上廣播
    io.emit("huida",msg);
  });
});

server.listen(80);

GPU云服務器云服務器 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86359.html

【Node之web通信Socket.IO】

摘要：簡介是的一個模塊，他提供通過進行通信的一種簡單方式，協議很復雜，但是提供了服務器和客戶端雙方的組件，所以只需要一個模塊就可以給應用程序加入對的支持。而且還能支持不同的瀏覽器。它們之間有什么區別呢區別在于的是持久性的。環境：Node v8.2.1; Npm v5.3.0; OS Windows10 在web開發中，我們使用HTTP協議，HTTP協議是基于文本的單向通訊機制，當我們想要從...

xzavier 2019-08-21 16:57 評論0 收藏0
Node.js和Socket.IO搭建Web Chat application

摘要：是，是的，它可以建立起一個基于事件的實時的雙向交流方式，極大的簡化了的處理過程。開始搭建這個應用幾乎只需要和最初級的知識，因為只搭建一個基本的程序。安裝好后創建一個，來配置應用。 WebSocket與Socket.IO WebSocket是一種協議，有了它就可以在TCP協議的基礎上在瀏覽器和服務器之間建立起了一種全雙工的通道，它完全兼容HTTP協議，有了它使得Web應用程序可以在瀏覽器...

kviccn 2019-08-20 16:30 評論0 收藏0
vue2.0開發聊天程序(六) 服務端的webScoket

大吉大利，今晚吃雞！　　　　　　　　　　　　　　　　　　　- PUBG 時隔多日，終于再次拾起這個拖了很久的項目。并不是因為沒時間，也不是因為這個項目對于我來說有多困難，就是一個字————懶。此項目的后臺，當然是選擇node.js來實現。作為一個前端，node.js比起java、php簡單多了。 node支持的webSocket 在npm中有很多支持webSocket的模塊，包括socket.io...

hiyayiji 2019-08-22 11:06 評論0 收藏0