用node實現websocket協議

来源:http://www.cnblogs.com/shouce/archive/2016/04/25/5429285.html
-Advertisement-
Play Games

協議 WebSocket是一種基於TCP之上的客戶端與伺服器全雙工通訊的協議，它在HTML5中被定義，也是新一代webapp的基礎規範之一。 它突破了早先的AJAX的限制，關鍵在於實時性，伺服器可以主動推送內容 到客戶端！可能的應用有：多人線上游戲，即時聊天，實時監控，遠程桌面，新聞伺服器等等。 對 ...


協議

WebSocket是一種基於TCP之上的客戶端與伺服器全雙工通訊的協議，它在HTML5中被定義，也是新一代webapp的基礎規範之一。

它突破了早先的AJAX的限制，關鍵在於實時性，伺服器可以主動推送內容 到客戶端！可能的應用有：多人線上游戲，即時聊天，實時監控，遠程桌面，新聞伺服器等等。

對於我自己，當前最想嘗試的是canvas+websocket組合起來能做什麼。

實現

由於握手的過程是一個標準的HTTP請求，因此 websocket 的實現有兩種選擇：1）TCP上實現； 2) 現有HTTP軟體上實現。後者的優勢在於可以共用現有的HTTP伺服器埠，並且不用重新實現認證功能和解析HTTP請求的功能。

這個示例中使用的 node 的HTTP模塊。（TCP版及所有文件見 附件）

node伺服器端代碼：

var http = require('http');
var url = require('url');
// var mime = require('mime');
var crypto = require('crypto');

var port = 4400;
var server = http.createServer();
    server.listen(port,function() {
        console.log('server is running on localhost:',port);
        server
        .on('connection',function(s) {
            console.log('on connection ',s);
        })
        .on('request',onrequest)
        .on('upgrade',onupgrade);
    });

var onrequest = function(req,res) {
    console.log( Object.keys(req) ,req.url,req['upgrade']);
    if( !req.upgrade ){
        // 非upgrade請求選擇：中斷或提供普通網頁
        res.writeHead(200, { 'content-type': 'text/plain' });
        res.write( 'WebSocket server works!' );
        
    }
    res.end();
    return;
};

var onupgrade = function (req,sock,head) {
    // console.log('方法:',Object.keys(sock));
    if(req.headers.upgrade !== 'WebSocket'){
        console.warn('非法連接');
        sock.end();
        return;
    }
    
    bind_sock_event(sock);

    try{
        handshake(req,sock,head);
    }catch(e){
        console.error(e);
        sock.end();
    }
};

// 包裝將要發送的幀
var wrap = function(data) {
    var fa = 0x00, fe = 0xff, data = data.toString()
        len = 2+Buffer.byteLength(data),
        buff = new Buffer(len);

    buff[0] = fa;
    buff.write(data,1);
    buff[len-1] = fe;
    return buff;
}
// 解開接收到的幀
var unwrap = function(data) {
    return data.slice(1,data.length-1);
}

var bind_sock_event = function(sock) {
    sock
    .on('data',function(buffer) {
        var data = unwrap(buffer);
        console.log('socket receive data : ',buffer,data,'\n>>> '+data);
        // send('hello html5,'+Date.now())
        sock.emit('send',data);
    })
    .on('close',function() {
        console.log('socket close');
    })
    .on('end',function() {
        console.log('socket end');
    })
    .on('send',function(data) { //自定義事件
        sock.write(wrap(data),'binary');
    })
};

var get_part = function(key) {
    var empty   = '',
        spaces  = key.replace(/\S/g,empty).length,
        part    = key.replace(/\D/g,empty);
    if(!spaces) throw {message:'Wrong key: '+key,name:'HandshakeError'}
    return get_big_endian(part / spaces);
}

var get_big_endian = function(n) {  
    return String.fromCharCode.apply(null,[3,2,1,0].map(function(i) { return n >> 8*i & 0xff }))
}

var challenge = function(key1,key2,head) {
    var sum = get_part(key1) + get_part(key2) + head.toString('binary');
    return crypto.createHash('md5').update(sum).digest('binary');
}

var handshake = function(req,sock,head) {
    var output = [],h = req.headers, br = '\r\n';

    // header
    output.push(
        'HTTP/1.1 101 WebSocket Protocol Handshake','Upgrade: WebSocket','Connection: Upgrade',
        'Sec-WebSocket-Origin: ' + h.origin,
        'Sec-WebSocket-Location: ws://' + h.host + req.url,
        'Sec-WebSocket-Protocol: my-custom-chat-protocol'+br
    );
    // body
    var c = challenge(h['sec-websocket-key1'],h['sec-websocket-key2'],head);
    output.push(c);

    sock.write(output.join(br),'binary');
}

瀏覽器客戶端代碼：

<html>
<head>
    <title>WebSocket Demo</title>
</head>
<style type="text/css">
  textarea{width:400px;height:150px;display:block;overflow-y:scroll;}
  #output{width:600px;height:400px;background:whiteSmoke;padding:1em .5em;color:#000;border:none;}
  button{padding:.2em 1em;}
</style>
<link href="layout.css" rel="stylesheet" type="text/css" /> 
<body>

<textarea id="output" readonly="readonly"></textarea>
<br>
<textarea id="input"></textarea>
<button id="send">send</button>

<script type="text/javascript">
// localhost
var socket = new WebSocket('ws://192.168.144.131:4400/')
socket.onopen = function(e) {
    log(e.type);
    socket.send('hello node');
}
socket.onclose = function(e) {
    log(e.type);
}
socket.onmessage = function(e) {
    log('receive @ '+ new Date().toLocaleTimeString() +'\n'+e.data);
  output.scrollTop = output.scrollHeight
}
socket.onclose = function(e) {
    log(e.type);
}
socket.addEventListener('close',function() {
    log('a another close event handler..');
},false);

// dom
var id = function(id) {
    return document.getElementById(id);
}
var output = id('output'), input = id('input'), send = id('send');
var log = function(msg) {
    output.textContent += '> '+msg + '\n'
}
send.addEventListener('click',function() {
    socket.send(input.value);
},false);

</script>
</body>
</html>

細節

在 http 協議之上的 websocket 協議實現只有兩步：握手，發送數據。

握手

握手的過程被稱為 challenge-response。首先客戶端發起一個名為Upgrade的HTTP GET請求，伺服器驗證此請求，給出101響應以表示接受此次協議升級，握手即完成了。

chrome inspector美化過的握手信息：

Request URL:ws://192.168.144.131:4400/pub/chat?q=me
Request Method:GET
Status Code:101 WebSocket Protocol Handshake

Request Headers
Connection:Upgrade
Host:192.168.144.131:4400
Origin:http://localhost:800
Sec-WebSocket-Key1:p2    G 947T 80  661 jAf2
Sec-WebSocket-Key2:z Z Q ^326 5 9= 7s1  1 7H4
Sec-WebSocket-Protocol::my-custom-chat-protocol
Upgrade:WebSocket
(Key3):7C:44:56:CA:1F:19:D2:0A

Response Headers
Connection:Upgrade
Sec-WebSocket-Location:ws://192.168.144.131:4400/pub/chat?q=me
Sec-WebSocket-Origin:http://localhost:800
Sec-WebSocket-Protocol:my-custom-chat-protocol
Upgrade:WebSocket
(Challenge Response):52:DF:2C:F4:50:C2:8E:98:14:B7:7D:09:CF:C8:33:40

請求頭部分

  • Host: websocket伺服器主機
  • Connection: 連接類型
  • Upgrade: 協議升級類型
  • Origin: 訪問來源
  • Sec-WebSocket-Protocol: 可選，子協議名稱，由應用自己定義，多個協議用空格分割。(*另外一個僅剩的可選項是cookie)
  • Sec-WebSocket-Key1: 安全認證key，xhr請求不能偽造'sec-'開頭的請求頭。
  • Sec-WebSocket-Key2: 同上
  • Key3: 響應體內容,8位元組隨機。

響應頭部分

  • Sec-WebSocket-Protocol: 必須包含請求的子協議名
  • Sec-WebSocket-Origin: 必須等於請求的來源
  • Sec-WebSocket-Location: 必須等於請求的地址
  • Challenge Response: 響應體內容，根據請求中三個key計算得來，16位元組。

應答字元串計算過程偽代碼:

part_1 = key1中所有數字 / key1中空格數量
part_2 同上
sum = big_endian(part_1)+big_endian(part_2)+key3
challenge_response = md5_digest(sum);

32位整數的big_endian計算策略：

# 很類似於rgba顏色計算,從下麵的函數可以看出計算過程
var big_endian = function(n) {
    return [3,2,1,0].map(function(i) { return n >> 8*i & 0xff });
}
big_endian(0xcc77aaff);
// -> [204, 119, 170, 255]

發送數據

WebSocket API的被設計成用事件處理數據，客戶端只要得到事件通知就可以獲取到完整的數據，而不需要手動處理緩衝器。

這種情況下，每一筆數據被稱為一幀。在規範的定義中，它的頭部必須以0x00開始，尾部屬性以0xff結束，這樣每一次數據發送至少有兩個位元組。

伺服器實現中，收到數據時要截掉頭尾；而發送數據是要包裝頭尾。格式如下：

# '你好'的原始二進位表示，請求頭和這裡都是utf8編碼
<Buffer e4 bd a0 e5 a5 bd>
# 包裝後的二進位表示。
<Buffer 00 e4 bd a0 e5 a5 bd ff>

查看或下載：https://gist.github.com/1066475


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 客戶端與伺服器新建套接字連接的一種方法
    客戶端與伺服器新建套接字連接的一種方法 背景   最近在做一個C/S文件管理系統，想要把客戶端命令跟文件的傳輸分開進行，這就要求我們重新在客戶端與伺服器之間建立一個新的套接字連接。 問題   首先我們知道C/S伺服器每接到一個客戶的鏈接請求後，都將建立一個新的 ...
  • 深入分析面向對象中的封裝作用
    之前我（夢在旅途）發表過一篇名為《深入分析面向對象中的對象概念》的文章，裡面主要講解了類與對象的關係以及對象的概念、狀態、行為、角色幾個知識點，讓大家對對象有了一些深入的瞭解，而本文則再來談談面向對象的三大特性之一：封裝，封裝是實現面向對象的基礎，深入的理解封裝的特性，有利於我們能更好的領悟面向對象 ...
  • 初見微服務之RESTful API
    1. REST名稱由來 REST全稱為Representational State Transfer，即表述性狀態轉移，最早由Roy Feilding博士在世紀之交（2000年）提出，喜歡追根溯源的朋友可以讀一下他的博士論文《Architectural Styles and the Design o ...
  • 常用的CSS清除浮動的方法優缺點分析（個人學習筆記）
    一、拋一塊問題磚（display： block）先看現象： 分析HTML代碼結構： 分析CSS代碼樣式： 這裡沒有給最外層的DIV.outer 設置高度，但是我們知道如果它裡面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後，就出現了一下影響： （1）：背景不能顯示 （2）： ...
  • EOS隱藏錯誤提示層的js方法
    //參數為消息提示層對應的對象，通常為表單里的對象 //特別註意：當使用擴展方法里的type=radio或者type=checkbox時，因為當時設置消息提示層的對象為obj.parentElement.parentElement,所以傳入的對象也應為其上2級父節點 function hiddenM ...
  • 用CSS3實現文字描邊
    CSS3作為新興的前端技術可以實現很多複雜變化的效果，比如文字描邊。 這裡主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果。例： 其中:x位移和y位移表示陰影相對文字的偏移值，可以為負值。 思路其實很簡單：對四個方向都作出模糊程度為零的1px陰影。 原則上，text-shadow支 ...
  • 一個App完成入門篇（七）- 完成發現頁面
    第七章是入門篇的倒數第二篇文章了，明天整個APP將進入收官。 本節教程主要要教會大家使用二維碼掃描和用do_WebView組件加在html頁面。 導入項目 do_WebView組件 掃描功能 自定義事件 將要學習的demo效果圖如下所示 1. 導入完整項目 本節示例demo請參考下載地址，可以導入到 ...
  • html5 meta(移動端）介紹及使用
    隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行，移動互聯應用開發也越來越受到人們的重視，用html5開發移動應用是最好的選擇。然而，每一款手機有不同的解析度，不同屏幕大小，如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢？學習html5 viewport的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類