用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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類