Web Socket & Socket.io

時間 2019-11-06

標籤 web socket socket.io 欄目 HTML 简体版

原文原文鏈接

HTTP

HTTP沒法輕鬆實現實時應用：javascript

HTTP協議是無狀態的，服務器只會響應來自客戶端的請求，可是它與客戶端之間不具有持續鏈接。
咱們能夠很是輕鬆的捕獲瀏覽器上發生的事件（好比用戶點擊了盒子），這個事件能夠輕鬆產生與服務器的數據交互（好比Ajax）。可是，反過來倒是不可能的：服務器端發生了一個事件，服務器沒法將這個事件的信息實時主動通知它的客戶端。只有在客戶端查詢服務器的當前狀態的時候，所發生事件的信息纔會從服務器傳遞到客戶端。

可是，確實聊天室確實存在html

方法：java

長輪詢：客戶端每隔很短的時間，都會對服務器發出請求，查看是否有新的消息，只要輪詢速度足夠快，例如1秒，就能給人形成交互是實時進行的印象。這種作法是無奈之舉，實際上對服務器、客戶端雙方都形成了大量的性能浪費。
長鏈接：客戶端只請求一次，可是服務器會將鏈接保持，不會返回結果（想象一下咱們沒有寫res.end()時，瀏覽器一直轉小菊花）。服務器有了新數據，就將數據發回來，又有了新數據，就將數據發回來，而一直保持掛起狀態。這種作法的也形成了大量的性能浪費。

WebSocket協議

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

WebSocket的原理很是的簡單：利用HTTP請求產生握手，HTTP頭部中含有WebSocket協議的請求，因此握手以後，兩者轉用TCP協議進行交流（QQ的協議）。如今的瀏覽器和服務器之間，就是QQ和QQ服務器的關係了。因此WebSocket協議，須要瀏覽器支持，更須要服務器支持。
支持WebSocket協議的瀏覽器有：Chrome 四、火狐四、IE十、Safari5
支持WebSocket協議的服務器有：Node 0、Apach7.0.二、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對象。瀏覽器

<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var socket = io();  //socket 對象
</script>

服務器中：服務器

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用戶接受。
發送的內容能夠是任何類型的值。socket

案例

前臺頁面：函數

<body>

<h1>index頁面</h1>
信息內容：<input type="text" name="" id="info" value="" />
發送： <input type="button" name="" id="btn" value="發送" />
<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
  var socket = io();
  document.getElementById("btn").onclick = function (  ) {
    socket.emit('tiwen',document.getElementById("info").value);
  }
  socket.on('huida',function ( msg ) {
    console.log('回答：' +　msg);
  });
</script>
</body>

後臺：性能

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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。