socket.io筆記

時間 2019-11-30

標籤 socket.io socket 筆記欄目系統網絡简体版

原文原文鏈接

WebSocket

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通信的網絡技術。html

現不少網站爲了實現即時通信，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客服端的瀏覽器，這種方式有一個很大的弊端，就是會佔用不少的帶寬。node

最新的輪詢效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通訊，但依然須要發出請求。web

使用WebSocket，瀏覽器和服務器只須要要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道，二者之間就直接能夠數據互相傳送。並且它爲咱們實現即時服務帶來了兩大好處：express

節省資源：互相溝通的Header是很小的-大概只有 2 Bytes。
推送信息：不須要客戶端請求，服務器能夠主動傳送數據給客戶端。

實現了websocket的瀏覽器：npm

socket.io

Socket.IO是一個WebSocket庫，包括了客戶端的js和服務器端的nodejs，它的目標是構建能夠在不一樣瀏覽器和移動設備上使用的實時應用。瀏覽器

socket.io的特色服務器

易用性：socket.io封裝了服務端和客戶端，使用起來很是簡單方便。
跨平臺：socket.io支持跨平臺，這就意味着你有了更多的選擇，能夠在本身喜歡的平臺下開發實時應用。
自適應：它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各類方式中選擇最佳的方式來實現網絡實時應用，很是方便和人性化，並且支持的瀏覽器最低達IE5.5。

安裝部署

socket.io支持跨平臺，在不一樣平臺下，它的使用方法也是大同小異，下面咱們就來安裝使用它websocket

首先要下載安裝node環境，而後經過npm安裝socket.io網絡

npm install socket.io

服務監聽

socket.io的服務端啓動很是的簡單，引用socket.io模塊。app

var io = require('socket.io');

而後調用listen函數，傳入監聽的端口號，開始服務監聽。練習環境中啓用了80端口用於測試，在練習時只須要監聽80端口便可：

var io = require('socket.io')(80);

註冊事件

咱們學習瞭如何啓動簡單的socket服務，下面來學習一下如何爲服務端註冊一些經常使用的事件：

var io = require('socket.io')(80);
io.on('connection',function(socket){
   //鏈接成功...
   socket.on('disconnect',function(){
       //用戶已經離開... 
    })  
})

connection事件在客戶端成功鏈接到服務端時觸發，有了這個事件，咱們能夠隨時掌握用戶鏈接到服務端的信息。

當客戶端成功創建鏈接時，在connection事件的回調函數中，咱們仍是能夠爲socket註冊一些經常使用的事件,如：disconnect事件，它在客戶端鏈接斷開是觸發，這時候我就知道用戶已經離開了。

啓動服務

目前爲止，咱們已經搭建好了一個最簡單的socket服務器，爲了在瀏覽器中可以訪問到咱們的服務，咱們還須要在服務端搭建一個簡單的web服務器，讓瀏覽器可以訪問咱們的客戶端頁面。

爲了便捷，咱們選用node.js中經常使用的express框架來實現web服務，示例以下：

var express = require('express');
var app = express();// 建立express實例，賦值給app。

app.get('/',function(req,res){
  res.status(200).send('Hello world！');
});
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection',function(socket){
 
});
server.listen(80);

客戶端引用

服務端構建完畢，下面看一看客戶端應該如何使用。

服務端運行後會在根目錄動態生成socket.io的客戶端js文件，客戶端能夠經過固定路徑/socket.io/socket.io.js添加引用。

首先添加網頁index.html,並在網頁中引用客戶端js文件：

<script src="/socket.io/socket.io.js"></script>

或者也能夠引用官方的cdn文件

//官方CDN
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>

鏈接服務

當客戶端成功加載socket.io客戶端文件後會獲取到一個全局對象io，咱們將經過io.connect函數來向服務端發起鏈接請求。

var socket = io.connect('/');
socket.on('connect',function(){
    //鏈接成功
});
socket.on('disconnect',function(data){
    //鏈接斷開
});

connect函數能夠接受一個url參數，url能夠socket服務的http完整地址，也能夠是相對路徑，若是省略則表示默認鏈接當前路徑。與服務端相似，客戶端也須要註冊相應的事件來捕獲信息，不一樣的是客戶端鏈接成功的事件是connect。

瞭解了客戶端如何使用，下面咱們建立網頁index.html，並添加以下內容(保存):

<html>
<head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            var socket = io.connect('/');
            socket.on('connect',function(){
                document.write('鏈接成功!');
            });
        };
    </script>
</head>
<body>
</body>
</html>

頁面添加完畢還要記得在服務端app.js中爲它添加路由，讓咱們能夠訪問測試網頁：

app.get('/index',function(req,res){
   res.sendFile('index.html',{root:__dirname});
});

實時通信

服務端和客戶端都構建完畢了，下面開始發送消息吧。

當咱們成功創建鏈接後，咱們能夠經過socket對象的send函數來互相發送消息，示例-客戶端向服務端發送消息(index.html)：

var socket = io.connect('/');
socket.on('connect',function(){
   //客戶端鏈接成功後發送消息'hello world!'
   socket.send('hello world!');
});
socket.on('message',function(data){
   alert(data);
});

鏈接成功後，咱們向服務端發送消息_hello world!_，還爲socket註冊了_message_事件，它是_send_函數對應的接收消息的事件，當服務端向客戶端send消息時，咱們就能夠在_message_事件中接收到發送過來的消息。服務端向客戶端發送消息也能夠經過_send_的方式，示例 - 服務端向客戶端發送消息(app.js)：

var io = require('scoket.io');
io.on('connection',function(socket){
  socket.send('你好啊！');
  socket.on('message',function(data){
      //收到消息
      console.log(data);
  });
});

與客戶端相同，服務端也須要爲socket註冊message事件來接收客戶端發送過來的消息。