HTML5 擁有許多引人注目的新特性，如 Canvas、本地存儲、多媒體編程接口、WebSocket 等等。雖然現在大家把它捧的很火的樣子,但是個(gè)人認為它還需要其他平臺的支持才能真正的"火起來(lái)"。
原來(lái)做web通信的時(shí)候 基于ajax的“輪詢(xún)” “長(cháng)輪詢(xún)”等其他的方式 網(wǎng)上有很詳細的解釋
輪詢(xún)：
這是最早的一種實(shí)現實(shí)時(shí) Web 應用的方案?？蛻?hù)端以一定的時(shí)間間隔向服務(wù)端發(fā)出請求，以頻繁請求的方式來(lái)保持客戶(hù)端和服務(wù)器端的同步。這種同步方案的最大問(wèn)題是，當客戶(hù)端以固定頻率向服務(wù)器發(fā)起請求的時(shí)候，服務(wù)器端的數據可能并沒(méi)有更新，這樣會(huì )帶來(lái)很多無(wú)謂的網(wǎng)絡(luò )傳輸，所以這是一種非常低效的實(shí)時(shí)方案。
長(cháng)輪詢(xún)：
長(cháng)輪詢(xún)是對定時(shí)輪詢(xún)的改進(jìn)和提高，目地是為了降低無(wú)效的網(wǎng)絡(luò )傳輸。當服務(wù)器端沒(méi)有數據更新的時(shí)候，連接會(huì )保持一段時(shí)間周期直到數據或狀態(tài)改變或者時(shí)間過(guò)期，通過(guò)這種機制來(lái)減少無(wú)效的客戶(hù)端和服務(wù)器間的交互。當然，如果服務(wù)端的數據變更非常頻繁的話(huà)，這種機制和定時(shí)輪詢(xún)比較起來(lái)沒(méi)有本質(zhì)上的性能的提高。
流：
流技術(shù)方案通常就是在客戶(hù)端的頁(yè)面使用一個(gè)隱藏的窗口向服務(wù)端發(fā)出一個(gè)長(cháng)連接的請求。服務(wù)器端接到這個(gè)請求后作出回應并不斷更新連接狀態(tài)以保證客戶(hù)端和服務(wù)器端的連接不過(guò)期。通過(guò)這種機制可以將服務(wù)器端的信息源源不斷地推向客戶(hù)端。這種機制在用戶(hù)體驗上有一點(diǎn)問(wèn)題，需要針對不同的瀏覽器設計不同的方案來(lái)改進(jìn)用戶(hù)體驗，同時(shí)這種機制在并發(fā)比較大的情況下，對服務(wù)器端的資源是一個(gè)極大的考驗。
最近WebSocket很火啊,曾經(jīng)做通信都用的 長(cháng)輪詢(xún) 后來(lái).Net平臺上用上 “SignalR（關(guān)于這個(gè)有興趣的可以和我討論這里就不多說(shuō)了）”這個(gè)血牛B的神器可以看看jabbr（基于它實(shí)現的多人聊天室,可能你訪(fǎng)問(wèn)不到這個(gè)網(wǎng)站,請自備XX工具訪(fǎng)問(wèn) ）和老外一起討論技術(shù)是不是很爽?
簡(jiǎn)單的介紹下SignalR
SignalR 是一個(gè)集成的客戶(hù)端與服務(wù)器庫，基于瀏覽器的客戶(hù)端和基于 ASP.NET 的服務(wù)器組件可以借助它來(lái)進(jìn)行雙向多步對話(huà)。 換句話(huà)說(shuō)，該對話(huà)可不受限制地進(jìn)行單個(gè)無(wú)狀態(tài)請求/響應數據交換；它將繼續，直到明確關(guān)閉。 對話(huà)通過(guò)永久連接進(jìn)行，允許客戶(hù)端向服務(wù)器發(fā)送多個(gè)消息，并允許服務(wù)器做出相應答復，值得注意的是，還允許服務(wù)器向客戶(hù)端發(fā)送異步消息。它和AJax類(lèi)似，都是基于現有的技術(shù)。本身是一個(gè)復合體。一般情況下，SignalR會(huì )使用Javascript的長(cháng)輪詢(xún)（ long polling），實(shí)現客戶(hù)端和服務(wù)端通信。在WebSockets出現以后，SignalR也支持WebSockets通信(前提是使用.NET4.5的版本基于IIS8后面會(huì )有介紹)。當然SignalR也使用了服務(wù)端的任務(wù)并行處理技術(shù)以提高服務(wù)器的擴展性。
照官方的話(huà)講SignalR它可以實(shí)現全雙工的通信也就是實(shí)時(shí)的 而且它有一個(gè)“推送消息”的概念通過(guò)查看它的文檔和源代碼可以發(fā)現他也非常智能（自動(dòng)檢測當前瀏覽器和服務(wù)器是否支持websocket如果支持則使用websocket通信否則是長(cháng)輪詢(xún)），最牛X的是他是跨平臺的可以基于Mono?。。?！
Mono！
多么牛X的框架！神馬IOS Android都能使用它！而且Android有一個(gè)叫做 SignalA(Signal for Android 不過(guò)它只支持Persistent Connections的連接方式)的框架可以完美結合.Net做通信 我已經(jīng)用上了 ^_^
Node Js 里面有個(gè) socket.io 的東西 目測使用方法和SignalR 非常的類(lèi)似（指的是Signal 的 Hub連接方式） 稍后會(huì )介紹的。
------------------------------華麗的分割線(xiàn)-------------------------------------------
繼續說(shuō)WebSocket 從w3c上看文檔能夠看到一些東西的比如
客戶(hù)端發(fā)到服務(wù)器的內容:
從服務(wù)器到客戶(hù)端的內容:
關(guān)于這個(gè)概念 可以去參考 WebSocket簡(jiǎn)單使用(一) - 概念
然后今天要說(shuō)的是 利用HTML5的 WebSocket做傳輸基礎然后Canvas繪圖 來(lái)實(shí)現視頻實(shí)時(shí)傳輸
首先說(shuō)一下平臺 Chrome和Safari的最新版本瀏覽器已經(jīng)支持是絕對可以的 火狐也可以（好像要用MozWebSocket） 然后恭喜IE10也支持了 最奇葩的時(shí) Windows Phone8上的瀏覽器也支持
參照網(wǎng)上的（來(lái)源自）先寫(xiě)一個(gè)簡(jiǎn)單的Demo應該是這樣
客戶(hù)端
在支持WebSocket的瀏覽器中，可以直接在Javascript中通過(guò)WebSocket對象來(lái)實(shí)現通信。WebSocket對象主要通過(guò)onopen，onmessage，onclose即onerror四個(gè)事件實(shí)現對socket消息的異步響應。
請創(chuàng )建靜態(tài)頁(yè)面 不用創(chuàng )建ruant=“server”的 否則會(huì )自動(dòng)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服務(wù)器地址 //var wsServer = 'ws://localhost:1818'; //基于.NET服務(wù)器地址 var websocket = new WebSocket(wsServer); //創(chuàng )建WebSocket對象 //websocket.send("hello");//向服務(wù)器發(fā)送消息 //alert(websocket.readyState);//查看websocket當前狀態(tài) websocket.onopen = function (evt) { //已經(jīng)建立連接 alert("已經(jīng)建立連接"); }; websocket.onclose = function (evt) { //已經(jīng)關(guān)閉連接 alert("已經(jīng)關(guān)閉連接"); }; websocket.onmessage = function (evt) { //收到服務(wù)器消息，使用evt.data提取 evt.stopPropagation() evt.preventDefault() //alert(evt.data); writeToScreen(evt.data); //websocket.close(); }; websocket.onerror = function (evt) { //產(chǎn)生異常 //alert(evt.message); writeToScreen(evt.message); }; function sendMsg() { if (websocket.readyState == websocket.OPEN) { msg = document.getElementById("msg").value; websocket.send(msg); writeToScreen("發(fā)送成功!"); } 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表示連接有四種狀態(tài)：
CONNECTING (0)：表示還沒(méi)建立連接；
OPEN (1)： 已經(jīng)建立連接，可以進(jìn)行通訊；
CLOSING (2)：通過(guò)關(guān)閉握手，正在關(guān)閉連接；
CLOSED (3)：連接已經(jīng)關(guān)閉或無(wú)法打開(kāi)；
url是代表 WebSocket 服務(wù)器的網(wǎng)絡(luò )地址，協(xié)議通常是”ws”或“wss(加密通信)”,send 方法就是發(fā)送數據到服務(wù)器端；
close 方法就是關(guān)閉連接；
onopen連接建立，即握手成功觸發(fā)的事件；
onmessage收到服務(wù)器消息時(shí)觸發(fā)的事件；
onerror異常觸發(fā)的事件；
onclose關(guān)閉連接觸發(fā)的事件；
先說(shuō)說(shuō)基于.NET4.5的吧 ashx里面應該是這樣寫(xiě)的
//得到當前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程序和功能 -打開(kāi)Windows功能里面 IIS選項啟動(dòng)4.5 和WebSocket支持 否則會(huì )報錯誤的。
如果你不是Windows8 或者IIS的問(wèn)題 你可以使用其他方式實(shí)現websocket服務(wù)器 比如.net socket模擬（因為websocket本身就是基于TCP的完全可以模擬只是規則特別..）
網(wǎng)上有人寫(xiě)了下面一段
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("等待客戶(hù)端連接...."); 16 Socket sc = listener.Accept();//接受一個(gè)連接 17 Console.WriteLine("接受到了客戶(hù)端："+sc.RemoteEndPoint.ToString()+"連接...."); 18 19 //握手 20 int length = sc.Receive(buffer);//接受客戶(hù)端握手信息 21 sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length))); 22 Console.WriteLine("已經(jīng)發(fā)送握手協(xié)議了...."); 23 24 //接受客戶(hù)端數據 25 Console.WriteLine("等待客戶(hù)端數據...."); 26 length = sc.Receive(buffer);//接受客戶(hù)端信息 27 string clientMsg=AnalyticData(buffer, length); 28 Console.WriteLine("接受到客戶(hù)端數據：" + clientMsg); 29 30 //發(fā)送數據 31 string sendMsg = "您好，" + clientMsg; 32 Console.WriteLine("發(fā)送數據：“"+sendMsg+"” 至客戶(hù)端...."); 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協(xié)議，但居然握手不成功，目前仍沒(méi)弄明白！ 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">客戶(hù)端握手信息</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 /// 解析客戶(hù)端數據包 84 /// </summary> 85 /// <param name="recBytes">服務(wù)器接收的數據包</param> 86 /// <param name="recByteLength">有效數據長(cháng)度</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;// 超過(guò)一幀暫不處理 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; // 數據長(cháng)度 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 /// 打包服務(wù)器數據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 = Encoding.UTF8.GetBytes(message);149 150 if (temp.Length < 126){151 contentBytes = new byte[temp.Length + 2];152 contentBytes[0] = 0x81;153 contentBytes[1] = (byte)temp.Length;154 Array.Copy(temp, 0, contentBytes, 2, temp.Length);155 }else if (temp.Length < 0xFFFF){156 contentBytes = new byte[temp.Length + 4];157 contentBytes[0] = 0x81;158 contentBytes[1] = 126;159 contentBytes[2] = (byte)(temp.Length & 0xFF);160 contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);161 Array.Copy(temp, 0, contentBytes, 4, temp.Length);162 }else{163 // 暫不處理超長(cháng)內容 164 }165 166 return contentBytes;167 } 168 }
或者參考這里
ok! 基本上能實(shí)現傳輸文字了,接下來(lái)是圖像 可以通過(guò)base64編碼的方式傳輸 也可以通過(guò)二進(jìn)制傳輸
HTML5的Canvas 可以實(shí)現繪圖 然后應該是這樣寫(xiě)的
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <div> <input type="text" id="msg" value="beyond is number one!" /> <button onclick="sendMsg()">走你~</button> </div> <canvas id="myCanvas" style="width: 400px; height: 500px;"></canvas> <div id="output"></div> <script type="text/javascript"> var wsServer = 'ws://192.168.10.242:9999/webSocket.ashx'; //服務(wù)器地址 //var wsServer = 'ws://localhost:36027/webSocket.ashx'; //服務(wù)器地址 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var websocket = new WebSocket(wsServer); //創(chuàng )建WebSocket對象 websocket.onopen = function (evt) { //已經(jīng)建立連接 alert("已經(jīng)建立連接"); }; websocket.onclose = function (evt) { //已經(jīng)關(guān)閉連接 //alert("已經(jīng)關(guān)閉連接"); writeToScreen("連接關(guān)閉"); }; websocket.onmessage = function (evt) { //收到服務(wù)器消息，使用evt.data提取 var image = new Image(); image.onload = function () { //image.height context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(image, 0, 0, canvas.width, canvas.height); } image.src = URL.createObjectURL(evt.data); }; websocket.onerror = function (evt) { //產(chǎn)生異常 writeToScreen(evt.message); }; function sendMsg() { if (websocket.readyState == websocket.OPEN) { msg = document.getElementById("msg").value; websocket.send(msg); writeToScreen("發(fā)送成功!"); } else { writeToScreen("連接失敗!"); } } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML += message; output.appendChild(pre); } </script></body></html>
通過(guò) context.drawImage(image, 0, 0, canvas.width, canvas.height); 來(lái)繪制圖像
websocket接到數據后通過(guò)
image.src = URL.createObjectURL(evt.data);轉換成圖片對象
ok 這樣能實(shí)現接收圖片了，然后服務(wù)端發(fā)送的時(shí)候
//Buffer里面為你的圖片數據 你可以通過(guò)文件流的方式來(lái)打開(kāi)await socket.SendAsync(buffer, WebSocketMessageType.Binary,true, CancellationToken.None);//注意此時(shí)WebSocketMessageType 為Binary二進(jìn)制流
然后我實(shí)現了一個(gè) 讀取本地文件夾 每隔1秒發(fā)送圖片給網(wǎng)頁(yè)的服務(wù)端
部分代碼如下
string imgPath = HttpContext.Current.Server.MapPath("images"); string[] files = Directory.GetFiles(imgPath); for (int i = 0; i < files.Length; i++) { using (FileStream fs = new FileStream(files[i], FileMode.Open)) { byte[] imgData = new byte[fs.Length]; fs.Read(imgData, 0, imgData.Length); //buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage)); buffer = new ArraySegment<byte>(imgData); // Asynchronously send a message to the client await socket.SendAsync(buffer, WebSocketMessageType.Binary, true, CancellationToken.None); Thread.Sleep(1000); } if (i == files.Length - 1) i = 0; }
這樣圖像傳輸解決了,然后實(shí)現套接字 就可以傳輸實(shí)時(shí)圖片了。
我做了一個(gè)Windows Phone的客戶(hù)端不斷的采集圖片發(fā)送給服務(wù)器 然后服務(wù)器接到圖片發(fā)送給瀏覽器的Demo 就不貼代碼了 上圖！
有圖有真相
(這張圖是在Windows Phone模擬器里面的IE瀏覽器上 證明了 它支持WebSocket)
（Windows 上的客戶(hù)端 ^.^ Windows Phone Windows 8都能的 ）
上面說(shuō)的僅僅是簡(jiǎn)單的演示程序 距離做項目還差的很遠，寫(xiě)這篇文章為的是給大家一個(gè)信心... Windows 8&Windows Phone也可以的...
-----------------------------------------華麗的分割線(xiàn)---------------------------------------------------
上面是.Net下次在介紹NodeJs的實(shí)現吧
Windows Phone交流群"157153754"
Windows8交流群 "243302359"
Happy Coding!
聯(lián)系客服
