在以前的博客中，看到html5的websocket很感兴趣，终于可以看到长轮询(websocket以前的实现方法是Developer Works的文章，在有简单的提及的同时，也阐述了websocket的基本概念
什么是web套接字
WebSocket协议是在html5中引入的新协议，用于实现浏览器和服务器的全双工通信。 看到上面链接的同学一定知道过去是怎么低效率地进行消费(轮询和comet )的。 另一方面，在websocket API中，浏览器和服务器只需要握手，浏览器和服务器之间形成快速通道。 两者之间可以直接交换数据。 同时这样做有两个优点
1 .减少通信传输字节：与以前使用http传输数据相比，websocket传输的多余信息更少，百度表示只有2k
2 .服务器可以主动将消息传递给客户机，而无需客户机询问
关于概念和好处，网上充斥着，所以省略说明，简单看一下其原理，再写网络版聊天室吧
握手
除了TCP连接的三次握手外，websocket协议还要求客户端和服务器建立连接需要额外的握手。 在最新版本的协议中是这样的
客户端向服务器发送请求
GET/HTTP/1.1
upgrade :网络套接字
连接：升级
Host: 127.0.0.1:8080
Origin: http://test.com
Pragma: no-cache
Cache-Control: no-cache
sec-web socket-key : otztd 55 qbhjf2xlndrgumg==
安全网络套接字-版本： 13
安全套接字-扩展版3360 x-WebKit-deflate-frame
用户代理： Mozilla/5.0 (MAC OS； 英特尔MAC OS x 10 _9_0) appleWebKit/537.36(khtml，like Gecko ) chrome/31.0.1650.57 safari/537.36
服务器响应
http/1.1 101交换协议
upgrade :网络套接字
连接：升级
sec-web socket-accept : xsosgr 30a KL2gnzknhkmet1qyja=
请求中的“Sec-WebSocket-Key”是随机的，服务器端使用这些数据创建SHA-1的信息摘要。 在“Sec-WebSocket-Key”中添加魔术字符串“258 EAF a5-e914-47da-95ca-C5 ab0DC 85 b 11”。 用SHA-1加密，然后进行BASE-64编码，并将结果作为“Sec-WebSocket-Accept”标头的值返回给客户端。
网络套接字API
握手后，浏览器与服务器建立了连接，两者可以相互通信。 网络套接字的API真的很简单。 来看看W3C的定义吧
枚举二进制类型{ ' blob '，' arraybuffer'}；
“[constructor(domstringURL，可选) domstringordomstring (domstringordomstring ) protocols
接口web socket 3360事件目标{
只读属性文档字符串URL；//就绪状态
一致短连接=0； 一致不确定短打开=1； 一致短关闭=2； 一致短关闭=3；
readonlyattributeunsignedshortreadystate；
自述文件下载； //networking
attribute EventHandler onopen； attribute EventHandler onerror； attribute EventHandler onclose；
readonlyattributedomstringextensions；
readonlyattributedomstringprotocol； 语音关闭([ clamp ] optionalunsignedsho
rtcode, optional DOMString reason);//messagingattribute EventHandler onmessage;
attribute BinaryType binaryType;voidsend(DOMString data);voidsend(Blob data);voidsend(ArrayBuffer data);voidsend(ArrayBufferView data);
};
創建websocket
ws=new WebSocket(address); //ws://127.0.0.1:8080
調用其構造函數，傳入地址，就可以創建一個websocket了，值得注意的是地址協議得是ws/wss
關閉socket
ws.close();
調用webservice實例的close()方法就可以關閉webservice，當然也可以傳入一個code和string說明為什么關了
幾個回調函數句柄
由於其異步執行，回調函數自然少不了，有四個重要的
onopen：連接創建后調用
onmessage：接收到服務器消息后調用
onerror：出錯時調用
onclose：關閉連接的時候調用
看名字就知道是干什么的了，每個回調函數都會傳入一個Event對象，可以通過event.data訪問消息
使用API
我們可以在創建socket成功后為其回調函數賦值
ws=newWebSocket(address);
ws.onopen=function(e){var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{}');
};
也可以通過事件綁定的方式
ws=newWebSocket(address);
ws.addEventListener('open',function(e){var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{}');
});
客戶端實現
其實客戶端的實現比較簡單，除了websocket相關的幾句就是一些自動focus、回車鍵事件處理、消息框自動定位到底部等簡單功能，不一一說明了
View Code
服務器支持
其實websocket的服務器實現網上可以找到很多了，向維基百科中列出的
但是我希望加入一些自己特定的處理，比如用戶名識別啊、廣播啊什么的，所以自己實現了一個簡單的C#版本
websocket 聊天室C#服務器實現
我上篇博客C# socket編程實踐——支持廣播的簡單socket服務器中介紹了怎么實現一個簡單的C#廣播服務器，在這上面擴展兩個部分就能作為websocket服務器了
1.wecsocket握手處理
當服務器收到瀏覽器握手請求后，首先需要識別握手信息，我簡單粗暴的使用了包含字符串處理，當然加入了是否握過手的判斷
client.BeginReceive (buffer, 0, buffer.Length, SocketFlags.None, newAsyncCallback (Recieve), client);string msg = Encoding.UTF8.GetString (buffer, 0, length);if (!clientPool [client].IsHandShaked && msg.Contains ("Sec-WebSocket-Key")) {
client.Send (PackageHandShakeData (buffer, length));
clientPool [client].IsHandShaked= true;return;
}
識別成功后就可以生成服務器響應發送給客戶端了
///
///打包服務器握手數據///
/// The hand shake data.
/// Hand shake bytes.
/// Length.
private byte[] PackageHandShakeData (byte[] handShakeBytes, intlength)
{string handShakeText = Encoding.UTF8.GetString (handShakeBytes, 0, length);string key = string.Empty;
Regex reg= new Regex (@"Sec-WebSocket-Key:(.*?)rn");
Match m=reg.Match (handShakeText);if (m.Value != "") {
key= Regex.Replace (m.Value, @"Sec-WebSocket-Key:(.*?)rn", "$1").Trim ();
}byte[] secKeyBytes =SHA1.Create ().ComputeHash (
Encoding.ASCII.GetBytes (key+ "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));string secKey =Convert.ToBase64String (secKeyBytes);var responseBuilder = newStringBuilder ();
responseBuilder.Append ("HTTP/1.1 101 Switching Protocols" + "rn");
responseBuilder.Append ("Upgrade: websocket" + "rn");
responseBuilder.Append ("Connection: Upgrade" + "rn");
responseBuilder.Append ("Sec-WebSocket-Accept:" + secKey + "rnrn");returnEncoding.UTF8.GetBytes (responseBuilder.ToString ());
}
2.解析瀏覽器消息和處理發送給瀏覽器的消息
websocket中數據並不完全是消息本身，我們需要做一些處理
解析客戶端發送來的數據
把發送給客戶端消息打包處理
如果看不懂我在寫什么，並且對C#版websocket感興趣的同學需要看一下我上一篇博客了
有圖有真相
看看我們寫的聊天室運行效果吧
服務器
客戶端——Byron
客戶端——Casper
源代碼
源代碼我已經上傳到了我的github上，對github不感冒的同學可以直接點擊這里下載，有興趣的同學可以下載看看，因為我在Mac+mono+Xamarin Studio上開發的(忽然感覺自己好極品在Mac上用C#。。。)，所以代碼編碼和Windows可能會有些差距，改成Windows兼容的應該就可以直接運行了，不過沒在Window下跑過，如果有錯誤還請大家多多指正。