2. 程式人生 > >通過(Node Js||.Net)基於HTML5的WebSocket實現實時視訊文字傳輸1

通過(Node Js||.Net)基於HTML5的WebSocket實現實時視訊文字傳輸1

阿新 • • 發佈：2019-02-07

HTML5 擁有許多引人注目的新特性，如 Canvas、本地儲存、多媒體程式設計介面、WebSocket 等等。雖然現在大家把它捧的很火的樣子,但是個人認為它還需要其他平臺的支援才能真正的"火起來"。

原來做web通訊的時候 基於ajax的“輪詢” “長輪詢”等其他的方式 網上有很詳細的解釋

輪詢：

這是最早的一種實現實時 Web 應用的方案。客戶端以一定的時間間隔向服務端發出請求，以頻繁請求的方式來保持客戶端和伺服器端的同步。這種同步方案的最大問題是，當客戶端以固定頻率向伺服器發起請求的時候，伺服器端的資料可能並沒有更新，這樣會帶來很多無謂的網路傳輸，所以這是一種非常低效的實時方案。

長輪詢：

長輪詢是對定時輪詢的改進和提高，目地是為了降低無效的網路傳輸。當伺服器端沒有資料更新的時候，連線會保持一段時間週期直到資料或狀態改變或者時間過期，通過這種機制來減少無效的客戶端和伺服器間的互動。當然，如果服務端的資料變更非常頻繁的話，這種機制和定時輪詢比較起來沒有本質上的效能的提高。

流：

流技術方案通常就是在客戶端的頁面使用一個隱藏的視窗向服務端發出一個長連線的請求。伺服器端接到這個請求後作出迴應並不斷更新連線狀態以保證客戶端和伺服器端的連線不過期。通過這種機制可以將伺服器端的資訊源源不斷地推向客戶端。這種機制在使用者體驗上有一點問題，需要針對不同的瀏覽器設計不同的方案來改進使用者體驗，同時這種機制在併發比較大的情況下，對伺服器端的資源是一個極大的考驗。

最近WebSocket很火啊,曾經做通訊都用的 長輪詢 後來.Net平臺上用上 “SignalR（關於這個有興趣的可以和我討論這裡就不多說了）”這個血牛B的神器可以看看jabbr（基於它實現的多人聊天室,可能你訪問不到這個網站,請自備XX工具訪問 ）和老外一起討論技術是不是很爽? 

簡單的介紹下SignalR 

SignalR 是一個整合的客戶端與伺服器庫，基於瀏覽器的客戶端和基於 ASP.NET 的伺服器元件可以藉助它來進行雙向多步對話。 換句話說，該對話可不受限制地進行單個無狀態請求/響應資料交換；它將繼續，直到明確關閉。 對話通過永久連線進行，允許客戶端向伺服器傳送多個訊息，並允許伺服器做出相應答覆，值得注意的是，還允許伺服器向客戶端傳送非同步訊息。它和AJax類似，都是基於現有的技術。本身是一個複合體。一般情況下，SignalR會使用Javascript的長輪詢（ long polling），實現客戶端和服務端通訊。在WebSockets出現以後，SignalR也支援WebSockets通訊(前提是使用.NET4.5的版本基於IIS8後面會有介紹)。當然SignalR也使用了服務端的任務並行處理技術以提高伺服器的擴充套件性。

照官方的話講SignalR它可以實現全雙工的通訊也就是實時的 而且它有一個“推送訊息”的概念通過檢視它的文件和原始碼可以發現他也非常智慧（自動檢測當前瀏覽器和伺服器是否支援websocket如果支援則使用websocket通訊否則是長輪詢），最牛X的是他是跨平臺的可以基於Mono！！！！

Mono！

多麼牛X的框架！神馬IOS Android都能使用它！而且Android有一個叫做 SignalA(Signal for Android 不過它只支援Persistent Connections的連線方式)的框架可以完美結合.Net做通訊 我已經用上了 ^_^

Node Js 裡面有個 socket.io 的東西 目測使用方法和SignalR 非常的類似（指的是Signal 的 Hub連線方式） 稍後會介紹的。

------------------------------華麗的分割線-------------------------------------------

繼續說WebSocket 從w3c上看文件能夠看到一些東西的比如

客戶端發到伺服器的內容:

  1. GET /chat HTTP/1.1
  2. Host: server.example.com
  3. Upgrade: websocket
  4. Connection:Upgrade
  5. Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
  6. Origin: http://example.com
  7. Sec-WebSocket-Protocol: chat, superchat
  8. Sec-WebSocket-Version:13
從伺服器到客戶端的內容:
  1. HTTP/1.1101SwitchingProtocols
  2. Upgrade: websocket
  3. Connection:Upgrade
  4. Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
  5. Sec-WebSocket-Protocol: chat
關於這個概念 可以去參考  WebSocket簡單使用(一) - 概念
然後今天要說的是 利用HTML5的 WebSocket做傳輸基礎然後Canvas繪圖 來實現視訊實時傳輸
首先說一下平臺  Chrome和Safari的最新版本瀏覽器已經支援是絕對可以的 火狐也可以（好像要用MozWebSocket） 然後恭喜IE10也支援了 最奇葩的時 Windows Phone8上的瀏覽器也支援
參照網上的（來源自）先寫一個簡單的Demo應該是這樣

客戶端

在支援WebSocket的瀏覽器中，可以直接在Javascript中通過WebSocket物件來實現通訊。WebSocket物件主要通過onopen，onmessage，onclose即onerror四個事件實現對socket訊息的非同步響應。

請建立靜態頁面 不用建立ruant=“server”的 否則會自動reload

複製程式碼 複製程式碼 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var wsServer = 'ws://localhost:9999/webSocket.ashx'; //基於.NET4.5伺服器地址
        //var wsServer = 'ws://localhost:1818'; //基於.NET伺服器地址

        var websocket = new WebSocket(wsServer); //建立WebSocket物件
        //websocket.send("hello");//向伺服器傳送訊息
        //alert(websocket.readyState);//檢視websocket當前狀態
        websocket.onopen = function (evt) {
            //已經建立連線
            alert("已經建立連線");
        };
        websocket.onclose = function (evt) {
            //已經關閉連線
            alert("已經關閉連線");
        };
        websocket.onmessage = function (evt) {
            //收到伺服器訊息，使用evt.data提取
            evt.stopPropagation()
            evt.preventDefault()
            //alert(evt.data);
            writeToScreen(evt.data);
            //websocket.close();
        };
        websocket.onerror = function (evt) {
            //產生異常
            //alert(evt.message);
            writeToScreen(evt.message);
        };
        function sendMsg() {
            if (websocket.readyState == websocket.OPEN) {
                msg = document.getElementById("msg").value;
                websocket.send(msg);
                writeToScreen("傳送成功!");
            } else {
                writeToScreen("連線失敗!");
            }
        }

        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML += message;
            output.appendChild(pre);
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="msg" value="beyond is number one!" />
        <button onclick="sendMsg()">send</button>
    </div>
    <div id="output"></div>
</body>
</html>
複製程式碼 複製程式碼

readyState表示連線有四種狀態：

CONNECTING (0)：表示還沒建立連線；

OPEN (1)： 已經建立連線，可以進行通訊；
CLOSING (2)：通過關閉握手，正在關閉連線；
CLOSED (3)：連線已經關閉或無法開啟；

url是代表 WebSocket 伺服器的網路地址，協議通常是”ws”或“wss(加密通訊)”,send 方法就是傳送資料到伺服器端；

close 方法就是關閉連線；

onopen連線建立，即握手成功觸發的事件；

onmessage收到伺服器訊息時觸發的事件；

onerror異常觸發的事件；

onclose關閉連線觸發的事件；

先說說基於.NET4.5的吧 ashx裡面應該是這樣寫的

複製程式碼 複製程式碼 
  　　　　　　//得到當前WebSocket請求
            HttpContext.Current.AcceptWebSocketRequest(async (context) =>
            {
                WebSocket socket = context.WebSocket;//Socket
                while (true)
                {
                    ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]);
                    CancellationToken token;
                    WebSocketReceiveResult result =
                            await socket.ReceiveAsync(buffer, token);
                    if (socket.State == WebSocketState.Open)
                    {
                        string userMessage = Encoding.UTF8.GetString(buffer.Array, 0,
                                result.Count);
                        userMessage = "You sent: " + userMessage + " at " +
                                DateTime.Now.ToLongTimeString();
                        buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage));
                        await socket.SendAsync(buffer, WebSocketMessageType.Text,
                                true, CancellationToken.None);
                    }
                    else { break; }
                }
            });
複製程式碼 複製程式碼

然後需要注意的是 部署到IIS8上面  轉到 Windows程式和功能 -開啟Windows功能裡面 IIS選項啟動4.5 和WebSocket支援  否則會報錯誤的。

如果你不是Windows8 或者IIS的問題 你可以使用其他方式實現websocket伺服器 比如.net socket模擬（因為websocket本身就是基於TCP的完全可以模擬只是規則特別..）

網上有人寫了下面一段

複製程式碼 View Code
 
 1   class Program
  2     {
  3         static void Main(string[] args)
  4         {
  5             int port = 1818;
  6             byte[] buffer = new byte[1024];
  7 
  8             IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port);
  9             Socket listener = new Socket(localEP.Address.AddressFamily,SocketType.Stream, ProtocolType.Tcp);
 10             
 11             try{
 12                 listener.Bind(localEP);
 13                 listener.Listen(10);
 14 
 15                 Console.WriteLine("等待客戶端連線....");
 16                 Socket sc = listener.Accept();//接受一個連線
 17                 Console.WriteLine("接受到了客戶端："+sc.RemoteEndPoint.ToString()+"連線....");
 18                 
 19                 //握手
 20                 int length = sc.Receive(buffer);//接受客戶端握手資訊
 21                 sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length)));
 22                 Console.WriteLine("已經發送握手協議了....");
 23                 
 24                 //接受客戶端資料
 25                 Console.WriteLine("等待客戶端資料....");
 26                 length = sc.Receive(buffer);//接受客戶端資訊
 27                 string clientMsg=AnalyticData(buffer, length);
 28                 Console.WriteLine("接受到客戶端資料：" + clientMsg);
 29 
 30                 //傳送資料
 31                 string sendMsg = "您好，" + clientMsg;
 32                 Console.WriteLine("傳送資料：“"+sendMsg+"” 至客戶端....");
 33                 sc.Send(PackData(sendMsg));
 34                 
 35                 Console.WriteLine("演示Over!");
 36 
 37             }
 38             catch (Exception e)
 39             {
 40                 Console.WriteLine(e.ToString());
 41             }
 42         }
 43 
 44         /// <summary>
 45         /// 打包握手資訊
 46         /// </summary>
 47         /// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
 48         /// <returns>資料包</returns>
 49         private static byte[] PackHandShakeData(string secKeyAccept)
 50         {
 51             var responseBuilder = new StringBuilder();
 52             responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine);
 53             responseBuilder.Append("Upgrade: websocket" + Environment.NewLine);
 54             responseBuilder.Append("Connection: Upgrade" + Environment.NewLine);
 55             responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);
 56             //如果把上一行換成下面兩行，才是thewebsocketprotocol-17協議，但居然握手不成功，目前仍沒弄明白！
 57             //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
 58             //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
 59 
 60             return Encoding.UTF8.GetBytes(responseBuilder.ToString());
 61         }
 62 
 63         /// <summary>
 64         /// 生成Sec-WebSocket-Accept
 65         /// </summary>
 66         /// <param name="handShakeText">客戶端握手資訊</param>
 67         /// <returns>Sec-WebSocket-Accept</returns>
 68         private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
 69         {
 70             string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
 71             string key = string.Empty;
 72             Regex r = new Regex(@"Sec\-WebSocket\-Key:(.*?)\r\n");
 73             Match m = r.Match(handShakeText);
 74             if (m.Groups.Count != 0)
 75             {
 76                 key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim();
 77             }
 78             byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
 79             return Convert.ToBase64String(encryptionString);
 80         }
 81 
 82         /// <summary>
 83         /// 解析客戶端資料包
 84         /// </summary>
 85         /// <param name="recBytes">伺服器接收的資料包</param>
 86         /// <param name="recByteLength">有效資料長度</param>
 87         /// <returns></returns>
 88         private static string AnalyticData(byte[] recBytes, int recByteLength)
 89         {
 90             if (recByteLength < 2) { return string.Empty; }
 91 
 92             bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最後一幀  
 93             if (!fin){
 94                 return string.Empty;// 超過一幀暫不處理 
 95             }
 96 
 97             bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩碼  
 98             if (!mask_flag){
 99                 return string.Empty;// 不包含掩碼的暫不處理
100             }
101 
102             int payload_len = recBytes[1] & 0x7F; // 資料長度  
103 
104             byte[] masks = new byte[4];
105             byte[] payload_data;
106 
107             if (payload_len == 126){
108                 Array.Copy(recBytes, 4, masks, 0, 4);
109                 payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]);
110                 payload_data = new byte[payload_len];
111                 Array.Copy(recBytes, 8, payload_data, 0, payload_len);
112 
113             }else if (payload_len == 127){
114                 Array.Copy(recBytes, 10, masks, 0, 4);
115                 byte[] uInt64Bytes = new byte[8];
116                 for (int i = 0; i < 8; i++){
117                     uInt64Bytes[i] = recBytes[9 - i];
118                 }
119                 UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);
120 
121                 payload_data = new byte[len];
122                 for (UInt64 i = 0; i < len; i++){
123                     payload_data[i] = recBytes[i + 14];
124                 }
125             }else{
126                 Array.Copy(recBytes, 2, masks, 0, 4);
127                 payload_data = new byte[payload_len];
128                 Array.Copy(recBytes, 6, payload_data, 0, payload_len);
129 
130             }
131 
132             for (var i = 0; i < payload_len; i++){
133                 payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]);
134             }
135             
136             return Encoding.UTF8.GetString(payload_data);
137         }
138 
139 
140         /// <summary>
141         /// 打包伺服器資料
142         /// </summary>
143         /// <param name="message">資料</param>
144         /// <returns>資料包</returns>
145         private static byte[] PackData(string message)
146         {
147             byte[] contentBytes = null;
148             byte[] temp =
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
通過(Node Js||.Net)基於HTML5的WebSocket實現實時視訊文字傳輸1

     
 


HTML5 擁有許多引人注目的新特性，如 Canvas、本地儲存、多媒體程式設計介面、WebSocket 等等。雖然現在大家把它捧的很火的樣子,但是個人認為它還需要其他平臺的支援才能真正的"火起來"。

原來做web通訊的時候 基於ajax的“輪詢” “長輪詢”等其他的方式 網上有很詳細的解釋

輪詢： 



  
 

    


    
    
基於live555實現實時視訊監控

     
 
                


目錄


















QQ:809205580




1 所需軟體、原始碼及下載地址










[email protected]:/home/work#tar zxvf live555-latest.tar.gz

[emai 



  
 

    


    
    
Asp.net基於session實現購物車的方法

     
 lai   程序   clas   contain   ext   info   border   mode   man   本文實例講述了asp.net基於session實現購物車的方法。分享給大家供大家參考，具體如下：



?




1
2
3
4
5
6
7
8
9
10
11
12
13
14
1 



  
 

    


    
    
node.js連接DB2實現fetchRows一行一行獲取sql的源碼

     
 uid   ati   參考   .com   and   hot   host   fetch   blob   參見程序中的queryResult那部分：
/*
 * This example demonstrates how to fetch a single row from a large tabl 



  
 

    


    
    
在centos7中安裝redis，並通過node.js操作redis

     
 lease   eply   準備   事件   tput   div   channel   cli   state   引言
最近在學習node.js 連接redis的模塊，所以嘗試了一下在虛擬機中安裝cent OS7，並安裝redis，並使用node.js 操作redis。所以順便做個筆記。
如有不對的 



  
 

    


    
    
部署vuejs dist文件，通過node.js編譯

     
 裝配   包含   壓縮包   wid   tar   nbsp   load   圖片   .cn   前期準備：
1. Linux環境，安裝配置node.js
① 下載地址：http://nodejs.cn/download/  ，下載linux 64位

② 已編譯好的壓縮包，解壓到指定目錄

1 cd 



  
 

    


    
    
1024_(即時通訊)使用node.js和socket.io實現多人聊天室

     
  
 
 使用node.js和socket.io實現多人聊天室 
 2015年01月24日 03:24:54 遠古大猛獁 閱讀數：2775 
 轉自： 
 http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html  



  
 

    


    
    
基於echarts實現實時資料傳輸效果

     
  
 
 效果圖： 
  
 程式碼片段： 
 const targetCoord = [1000, 140]
const curveness = 0.2
const linesData = []
const categories = [{
    name: '流入中',
    itemStyle: {
 



  
 

    


    
    
Asp.Net Core + SignalR 實現實時通訊

     
 一、搭建專案 
1、建立一個ASP.NET Core MVC 專案 
 
  
2、nuget 下載和安裝 MicroSoft.AspNetCore.SignalR 
 
vs提示版本衝突 
 
這時我們選擇低版本即可 
 
 
二、SignalR配置 
1、在model中建立一個類MyHub 程式 



  
 

    


    
    
Node.js簡介——基於Node.js搭建自動化測試環境

     
  
 
 有必要整理一下Node.js基礎知識啦！ 
                                     & 



  
 

    


    
    
Node.Js+Redis+Socket.IO 實現 聊天室或推送訊息

     
 
                
基於Redis 推送，向Node.Js 推送訊息，Node.Js 把 訊息推送給 Socket.IO(可以是WebSocket，也可以是long-Polling,由Socket.IO 封裝)
需要 Redis服務端，Node.Js需要 redis模組和Socket.IO模組 



  
 

    


    
    
Node.js使用遞迴實現遍歷資料夾中所有檔案

     
  
 
 https://blog.csdn.net/younglao/article/details/77046830?locationNum=8&fps=1 
 版權宣告：本文為博主原創文章，未經博主允許不得轉載。    https://blog.csdn.net/y 



  
 

    


    
    
node.js後臺jquery前臺-- 實現使用者登入註冊AJAX互動

     
 
							
							
							最近實現了node.js當作後臺，jquery寫前臺AJAX程式碼的，實現使用者登入和註冊的功能，重新整理了前後端互動的三觀。特記錄一下。



1.login.ejs實現form框架

   <form >
            <ul&g 



  
 

    


    
    
基於freeSWITCH的sip協議利用WebRTC 實現實時視訊聊天

     
 
                1.FreeSWITCH windows版安裝FreeSWITCH 是一個電話的軟交換解決方案，包括一個軟電話和軟交換機用以提供語音和聊天的產品驅動。此經驗主要介紹FreeSWITCH windows版安裝過程。下載地址：http://files.freeswitch.org 



  
 

    


    
    
C++基於OpenCV實現實時監控和運動檢測記錄

     
  
  
  
 
                  
  基於OpenCV實現實時監控並通過運動檢測記錄視訊
  一、課程介紹
  1. 課程來源
  課程 



  
 

    


    
    
android錄屏直播：VLC通過rtsp協議播放android錄屏實時視訊（Java實現）

     
 
                首先說下為什麼要做這樣一個東西          在上家公司的時候，作為客戶端開發，一個月要給領導演示異常app的開發成果，當時用的策略是用錄屏類軟體，錄製成mp4，然後通過投影播放mp4檔案，來給領導看。這樣做帶來的問題是，要提前準備mp4需要時間，領導想要看除了mp4外的 



  
 

    


    
    
通過node.js搭建伺服器 來處理post或者get請求

     
 
                node.js讀取資料const http = require("http")const url = require("url")const queryString = require("querystring")const server= http.createServer 



  
 

    


    
    
Node.js Net 模組的所有事件和方法&&net.Socket

     
 
                
Node.js Net 模組
Node.js Net 模組提供了一些用於底層的網路通訊的小工具，包含了建立伺服器/客戶端的方法，我們可以通過以下方式引入該模組：


var net = require("net")方法

net.createServer([options] 



  
 

    


    
    
Node.js使用fs模組實現對本地圖片下載

     
 
                使用node.js自帶的http模組與fs模組搭建了一個可以下載圖片的伺服器。專案的github：https://github.com/junhaogz215/getImage效果如下：執行伺服器之後在位址列輸入http://localhost:3000可跳轉到index.h 



  
 

    


    
    
Node.js開發 ---- angular + markdown實現CRUD

     
 
                
nodejs
mongodb
angular *1

專案結構


安裝中介軟體
npm install express
npm install mongoose
npm install morgan
npm install body-parser
npm install