WebSocket與Socket.io的理解

時間 2019-11-07

標籤 websocket socket.io socket 理解欄目系統網絡简体版

原文原文鏈接

WebSocket protocol是HTML5一種新的協議。它的最大特色就是，服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。
javascript

HTTP設計的時候，好比瀏覽器直接發出請求，服務器才能響應。若是瀏覽器不發出request請求，服務器是不能主動找到瀏覽器，傳輸一些數據的。也就是說：瀏覽器必須主動請求，服務器纔會發出響應。html

可是如今的web頁面，對實時的要求很高：web看股票、籃球比賽圖文直播、聊天室、站內信等等。
如今的作法基本都是長輪詢，用通俗易懂的話來講，就是客戶端不停的（setInterval）向服務器發送請求以獲取最新的數據信息。這裏的「不停」實際上是有中止的，只是咱們人眼沒法分辨是否中止，它只是一種快速的停下而後又當即開始鏈接而已。瀏覽器每隔好比20秒都問一下服務器，有沒有人給我發站內信。服務器是不能有新消息就主動通知瀏覽器的。java

HTML5有了一個叫作websocket的協議，容許服務器主動發出通知。
在 WebSocket API，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。在此WebSocket 協議中，爲咱們實現即時服務帶來了兩大好處：jquery

列表項目web

Header互相溝通的Header是很小的-大概只有 2 Bytes

Server Pushexpress

服務器的推送，服務器再也不被動的接收到瀏覽器的request以後才返回數據，而是在有新數據時就主動推送給瀏覽器。
websocket須要瀏覽器足夠新，IE10+。服務器也要足夠新，NodeJS天生就支持。npm

爲了創建一個 WebSocket 鏈接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和一般的 HTTP 請求不一樣，包含了一些附加頭信息，其中附加頭信息」Upgrade: WebSocket」代表這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息而後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 鏈接就創建起來了，雙方就能夠經過這個鏈接通道自由的傳遞信息，而且這個鏈接會持續存在直到客戶端或者服務器端的某一方主動的關閉鏈接。瀏覽器

接下來談談socket.io。它是一個NodeJS用的npm包，簡化了websocket的程序開發。不用socket.io也能開發websocket可是極其複雜，好比要設置HTTP頭等等。下面是簡單的demo。服務器

app.js:websocket

var express = require('express');
var app = express();
var http = require('http').Server(app);
//服務器端存在了一個io對象：
var io = require("socket.io")(http);
app.use(express.static("public"));
app.get('/', function(req, res){
  res.sendFile(__dirname + "/index.html");
});
//增長了一箇中間件：
io.on("connect",function(socket){
  //服務器端出現了一個socket對象
  console.log("有人connect了！~~");
  socket.on("ltxx",function(info){
      console.log(info);
  });
});
http.listen(3000, function(){
  console.log('監聽3000端口');
});

index.html:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>
    <ul id="messages">
    </ul>
    <form action="">
      <input id="m"  />
      <button>發佈</button>
    </form>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script src="/jquery-1.12.3.min.js"></script>
    <script>
      var socket = io();
      $("button").click(function(){
        //socket.emit(信息名字,信息值)
        socket.emit('ltxx', $('#m').val());
        //清空文本框
        $('#m').val('');
        return false;
      })
    </script>
  </body>
</html>

瀏覽器emit了信息，服務器就能listen到。服務器listen使用on函數。

服務器要把本身收到的信息，再次broadcast出去，而後讓全部的html頁面都可以收聽服務器的廣播便可。