原文 http://www.oseye.net/user/kevin/blog/81
关于WebSocket我打算分如下几篇博文来探探路:
- WebSocket简单使用(一) - 概念
- WebSocket简单使用(二) - 客户端
- WebSocket简单使用(三) - 服务器端
- WebSocket简单使用(四) - 完整实例
- WebSocket简单使用(五) - 模拟微信 连接键盘 功能
背景：
前几天老大突然发现微信有个链接键盘的功能，我仔细想了下或许是使用WebSocket来实现的，又加上最近HTML5的呼声愈来愈高，觉得有必要研究下HTML5了。
说是完整的实例，其实并不完整，这里需要说明，这个实例并没有实现并发，也没考虑到算法和资源管理，所谓的完整是有客户端和服务器端，并且能跑起来演示。直接上菜，关于理论请看前面三篇博文，TCP请另看相关知识。
客户端代码：
- <html>
- <head>
- <metacharset="UTF-8">
- <title>Web sockets test</title>
- <scriptsrc="jquery-min.js"type="text/javascript"></script>
- <scripttype="text/javascript">
- var ws;
- functionToggleConnectionClicked(){
- try{
- ws =newWebSocket("ws://10.9.146.31:1818/chat");//连接服务器
- ws.onopen =function(event){alert("已经与服务器建立了连接\r\n当前连接状态："+this.readyState);};
- ws.onmessage =function(event){alert("接收到服务器发送的数据：\r\n"+event.data);};
- ws.onclose =function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};
- ws.onerror =function(event){alert("WebSocket异常！");};
- }catch(ex){
- alert(ex.message);
- }
- };
- functionSendData(){
- try{
- ws.send("beston");
- }catch(ex){
- alert(ex.message);
- }
- };
- function seestate(){
- alert(ws.readyState);
- }
- </script>
- </head>
- <body>
- <buttonid='ToggleConnection'type="button"onclick='ToggleConnectionClicked();'>连接服务器</button><br/><br/>
- <buttonid='ToggleConnection'type="button"onclick='SendData();'>发送我的名字：beston</button><br/><br/>
- <buttonid='ToggleConnection'type="button"onclick='seestate();'>查看状态</button><br/><br/>
- </body>
- </html>
服务器端代码：
- using System;
- using System.Net;
- using System.Net.Sockets;
- using System.Security.Cryptography;
- using System.Text;
- using System.Text.RegularExpressions;
- namespace WebSocket
- {
- classProgram
- {
- staticvoidMain(string[] args)
- {
- int port =1818;
- byte[] buffer =newbyte[1024];
- IPEndPoint localEP =newIPEndPoint(IPAddress.Any, port);
- Socketlistener =newSocket(localEP.Address.AddressFamily,SocketType.Stream,ProtocolType.Tcp);
- try{
- listener.Bind(localEP);
- listener.Listen(10);
- Console.WriteLine("等待客户端连接....");
- Socket sc =listener.Accept();//接受一个连接
- Console.WriteLine("接受到了客户端："+sc.RemoteEndPoint.ToString()+"连接....");
- //握手
- int length = sc.Receive(buffer);//接受客户端握手信息
- sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length)));
- Console.WriteLine("已经发送握手协议了....");
- //接受客户端数据
- Console.WriteLine("等待客户端数据....");
- length = sc.Receive(buffer);//接受客户端信息
- string clientMsg=AnalyticData(buffer, length);
- Console.WriteLine("接受到客户端数据："+ clientMsg);
- //发送数据
- string sendMsg ="您好，"+ clientMsg;
- Console.WriteLine("发送数据：“"+sendMsg+"” 至客户端....");
- sc.Send(PackData(sendMsg));
- Console.WriteLine("演示Over!");
- }
- catch(Exception e)
- {
- Console.WriteLine(e.ToString());
- }
- }
- /// <summary>
- /// 打包握手信息
- /// </summary>
- /// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
- /// <returns>数据包</returns>
- privatestaticbyte[]PackHandShakeData(string secKeyAccept)
- {
- var responseBuilder =newStringBuilder();
- responseBuilder.Append("HTTP/1.1 101 Switching Protocols"+Environment.NewLine);
- responseBuilder.Append("Upgrade: websocket"+Environment.NewLine);
- responseBuilder.Append("Connection: Upgrade"+Environment.NewLine);
- responseBuilder.Append("Sec-WebSocket-Accept: "+ secKeyAccept +Environment.NewLine+Environment.NewLine);
- //如果把上一行换成下面两行，才是thewebsocketprotocol-17协议，但居然握手不成功，目前仍没弄明白！
- //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
- //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
- returnEncoding.UTF8.GetBytes(responseBuilder.ToString());
- }
- /// <summary>
- /// 生成Sec-WebSocket-Accept
- /// </summary>
- /// <param name="handShakeText">客户端握手信息</param>
- /// <returns>Sec-WebSocket-Accept</returns>
- privatestaticstringGetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
- {
- string handShakeText =Encoding.UTF8.GetString(handShakeBytes,0, bytesLength);
- string key =string.Empty;
- Regex r =newRegex(@"Sec\-WebSocket\-Key:(.*?)\r\n");
- Match m = r.Match(handShakeText);
- if(m.Groups.Count!=0)
- {
- key =Regex.Replace(m.Value,@"Sec\-WebSocket\-Key:(.*?)\r\n","$1").Trim();
- }
- byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key +"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
- returnConvert.ToBase64String(encryptionString);
- }
- /// <summary>
- /// 解析客户端数据包
- /// </summary>
- /// <param name="recBytes">服务器接收的数据包</param>
- /// <param name="recByteLength">有效数据长度</param>
- /// <returns></returns>
- privatestaticstringAnalyticData(byte[] recBytes,int recByteLength)
- {
- if(recByteLength <2){returnstring.Empty;}
- bool fin =(recBytes[0]&0x80)==0x80;// 1bit，1表示最后一帧
- if(!fin){
- returnstring.Empty;// 超过一帧暂不处理
- }
- bool mask_flag =(recBytes[1]&0x80)==0x80;// 是否包含掩码
- if(!mask_flag){
- returnstring.Empty;// 不包含掩码的暂不处理
- }
- int payload_len = recBytes[1]&0x7F;// 数据长度
- byte[] masks =newbyte[4];
- byte[] payload_data;
- if(payload_len ==126){
- Array.Copy(recBytes,4, masks,0,4);
- payload_len =(UInt16)(recBytes[2]<<8| recBytes[3]);
- payload_data =newbyte[payload_len];
- Array.Copy(recBytes,8, payload_data,0, payload_len);
- }elseif(payload_len ==127){
- Array.Copy(recBytes,10, masks,0,4);
- byte[] uInt64Bytes =newbyte[8];
- for(int i =0; i <8; i++){
- uInt64Bytes[i]= recBytes[9- i];
- }
- UInt64 len =BitConverter.ToUInt64(uInt64Bytes,0);
- payload_data =newbyte[len];
- for(UInt64 i =0; i < len; i++){
- payload_data[i]= recBytes[i +14];
- }
- }else{
- Array.Copy(recBytes,2, masks,0,4);
- payload_data =newbyte[payload_len];
- Array.Copy(recBytes,6, payload_data,0, payload_len);
- }
- for(var i =0; i < payload_len; i++){
- payload_data[i]=(byte)(payload_data[i]^ masks[i %4]);
- }
- returnEncoding.UTF8.GetString(payload_data);
- }
- /// <summary>
- /// 打包服务器数据
- /// </summary>
- /// <param name="message">数据</param>
- /// <returns>数据包</returns>
- privatestaticbyte[]PackData(string message)
- {
- byte[] contentBytes =null;
- byte[] temp =Encoding.UTF8.GetBytes(message);
- if(temp.Length<126){
- contentBytes =newbyte[temp.Length+2];
- contentBytes[0]=0x81;
- contentBytes[1]=(byte)temp.Length;
- Array.Copy(temp,0, contentBytes,2, temp.Length);
- }elseif(temp.Length<0xFFFF){
- contentBytes =newbyte[temp.Length+4];
- contentBytes[0]=0x81;
- contentBytes[1]=126;
- contentBytes[2]=(byte)(temp.Length&0xFF);
- contentBytes[3]=(byte)(temp.Length>>8&0xFF);
- Array.Copy(temp,0, contentBytes,4, temp.Length);
- }else{
- // 暂不处理超长内容
- }
- return contentBytes;
- }
- }
- }
运行效果：
使用的浏览器：
下载代码：WebSocket.zip
疑问：如实例中
- responseBuilder.Append("Sec-WebSocket-Accept: "+ secKeyAccept +Environment.NewLine+Environment.NewLine);
- //如果把上一行换成下面两行，才是thewebsocketprotocol-17协议，但居然握手不成功，目前仍没弄明白！
- //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
- //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
这是为什么呢？看到这篇博文的兄弟希望能够给我解惑！
