WebSocket简单使用(四) - 完整实例

简介: 原文 http://www.oseye.net/user/kevin/blog/81 关于WebSocket我打算分如下几篇博文来探探路: WebSocket简单使用(一) - 概念 WebSocket简单使用(二) - 客户端 WebSocket简单使用(三) - 服务器端 WebSocket简单使用(四) - 完整实例 WebSocket简单使用(五) - 模拟微信 连接键盘 功能 背景: 前几天老大突然发现微信有个链接键盘的功能,我仔细想了下或许是使用WebSocket来实现的,又加上最近HTML5的呼声愈来愈高,觉得有必要研究下HTML5了。

原文 http://www.oseye.net/user/kevin/blog/81

关于WebSocket我打算分如下几篇博文来探探路:

  1. WebSocket简单使用(一) - 概念
  2. WebSocket简单使用(二) - 客户端
  3. WebSocket简单使用(三) - 服务器端
  4. WebSocket简单使用(四) - 完整实例
  5. WebSocket简单使用(五) - 模拟微信 连接键盘 功能

背景:

前几天老大突然发现微信有个链接键盘的功能,我仔细想了下或许是使用WebSocket来实现的,又加上最近HTML5的呼声愈来愈高,觉得有必要研究下HTML5了。

说是完整的实例,其实并不完整,这里需要说明,这个实例并没有实现并发,也没考虑到算法和资源管理,所谓的完整是有客户端和服务器端,并且能跑起来演示。直接上菜,关于理论请看前面三篇博文,TCP请另看相关知识。

客户端代码:

  1. <html>
  2. <head>
  3. <metacharset="UTF-8">
  4. <title>Web sockets test</title>
  5. <scriptsrc="jquery-min.js"type="text/javascript"></script>
  6. <scripttype="text/javascript">
  7. var ws;
  8. functionToggleConnectionClicked(){
  9. try{
  10. ws =newWebSocket("ws://10.9.146.31:1818/chat");//连接服务器
  11. ws.onopen =function(event){alert("已经与服务器建立了连接\r\n当前连接状态:"+this.readyState);};
  12. ws.onmessage =function(event){alert("接收到服务器发送的数据:\r\n"+event.data);};
  13. ws.onclose =function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);};
  14. ws.onerror =function(event){alert("WebSocket异常!");};
  15. }catch(ex){
  16. alert(ex.message);
  17. }
  18. };
  19.  
  20. functionSendData(){
  21. try{
  22. ws.send("beston");
  23. }catch(ex){
  24. alert(ex.message);
  25. }
  26. };
  27.  
  28. function seestate(){
  29. alert(ws.readyState);
  30. }
  31. </script>
  32. </head>
  33. <body>
  34. <buttonid='ToggleConnection'type="button"onclick='ToggleConnectionClicked();'>连接服务器</button><br/><br/>
  35. <buttonid='ToggleConnection'type="button"onclick='SendData();'>发送我的名字:beston</button><br/><br/>
  36. <buttonid='ToggleConnection'type="button"onclick='seestate();'>查看状态</button><br/><br/>
  37. </body>
  38. </html>

服务器端代码:

  1. using System;
  2. using System.Net;
  3. using System.Net.Sockets;
  4. using System.Security.Cryptography;
  5. using System.Text;
  6. using System.Text.RegularExpressions;
  7.  
  8. namespace WebSocket
  9. {
  10. classProgram
  11. {
  12. staticvoidMain(string[] args)
  13. {
  14. int port =1818;
  15. byte[] buffer =newbyte[1024];
  16.  
  17. IPEndPoint localEP =newIPEndPoint(IPAddress.Any, port);
  18. Socketlistener =newSocket(localEP.Address.AddressFamily,SocketType.Stream,ProtocolType.Tcp);
  19. try{
  20. listener.Bind(localEP);
  21. listener.Listen(10);
  22.  
  23. Console.WriteLine("等待客户端连接....");
  24. Socket sc =listener.Accept();//接受一个连接
  25. Console.WriteLine("接受到了客户端:"+sc.RemoteEndPoint.ToString()+"连接....");
  26. //握手
  27. int length = sc.Receive(buffer);//接受客户端握手信息
  28. sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length)));
  29. Console.WriteLine("已经发送握手协议了....");
  30. //接受客户端数据
  31. Console.WriteLine("等待客户端数据....");
  32. length = sc.Receive(buffer);//接受客户端信息
  33. string clientMsg=AnalyticData(buffer, length);
  34. Console.WriteLine("接受到客户端数据:"+ clientMsg);
  35.  
  36. //发送数据
  37. string sendMsg ="您好,"+ clientMsg;
  38. Console.WriteLine("发送数据:“"+sendMsg+"” 至客户端....");
  39. sc.Send(PackData(sendMsg));
  40. Console.WriteLine("演示Over!");
  41.  
  42. }
  43. catch(Exception e)
  44. {
  45. Console.WriteLine(e.ToString());
  46. }
  47. }
  48.  
  49. /// <summary>
  50. /// 打包握手信息
  51. /// </summary>
  52. /// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
  53. /// <returns>数据包</returns>
  54. privatestaticbyte[]PackHandShakeData(string secKeyAccept)
  55. {
  56. var responseBuilder =newStringBuilder();
  57. responseBuilder.Append("HTTP/1.1 101 Switching Protocols"+Environment.NewLine);
  58. responseBuilder.Append("Upgrade: websocket"+Environment.NewLine);
  59. responseBuilder.Append("Connection: Upgrade"+Environment.NewLine);
  60. responseBuilder.Append("Sec-WebSocket-Accept: "+ secKeyAccept +Environment.NewLine+Environment.NewLine);
  61. //如果把上一行换成下面两行,才是thewebsocketprotocol-17协议,但居然握手不成功,目前仍没弄明白!
  62. //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
  63. //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
  64.  
  65. returnEncoding.UTF8.GetBytes(responseBuilder.ToString());
  66. }
  67.  
  68. /// <summary>
  69. /// 生成Sec-WebSocket-Accept
  70. /// </summary>
  71. /// <param name="handShakeText">客户端握手信息</param>
  72. /// <returns>Sec-WebSocket-Accept</returns>
  73. privatestaticstringGetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
  74. {
  75. string handShakeText =Encoding.UTF8.GetString(handShakeBytes,0, bytesLength);
  76. string key =string.Empty;
  77. Regex r =newRegex(@"Sec\-WebSocket\-Key:(.*?)\r\n");
  78. Match m = r.Match(handShakeText);
  79. if(m.Groups.Count!=0)
  80. {
  81. key =Regex.Replace(m.Value,@"Sec\-WebSocket\-Key:(.*?)\r\n","$1").Trim();
  82. }
  83. byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key +"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
  84. returnConvert.ToBase64String(encryptionString);
  85. }
  86.  
  87. /// <summary>
  88. /// 解析客户端数据包
  89. /// </summary>
  90. /// <param name="recBytes">服务器接收的数据包</param>
  91. /// <param name="recByteLength">有效数据长度</param>
  92. /// <returns></returns>
  93. privatestaticstringAnalyticData(byte[] recBytes,int recByteLength)
  94. {
  95. if(recByteLength <2){returnstring.Empty;}
  96.  
  97. bool fin =(recBytes[0]&0x80)==0x80;// 1bit,1表示最后一帧
  98. if(!fin){
  99. returnstring.Empty;// 超过一帧暂不处理
  100. }
  101.  
  102. bool mask_flag =(recBytes[1]&0x80)==0x80;// 是否包含掩码
  103. if(!mask_flag){
  104. returnstring.Empty;// 不包含掩码的暂不处理
  105. }
  106.  
  107. int payload_len = recBytes[1]&0x7F;// 数据长度
  108.  
  109. byte[] masks =newbyte[4];
  110. byte[] payload_data;
  111.  
  112. if(payload_len ==126){
  113. Array.Copy(recBytes,4, masks,0,4);
  114. payload_len =(UInt16)(recBytes[2]<<8| recBytes[3]);
  115. payload_data =newbyte[payload_len];
  116. Array.Copy(recBytes,8, payload_data,0, payload_len);
  117.  
  118. }elseif(payload_len ==127){
  119. Array.Copy(recBytes,10, masks,0,4);
  120. byte[] uInt64Bytes =newbyte[8];
  121. for(int i =0; i <8; i++){
  122. uInt64Bytes[i]= recBytes[9- i];
  123. }
  124. UInt64 len =BitConverter.ToUInt64(uInt64Bytes,0);
  125.  
  126. payload_data =newbyte[len];
  127. for(UInt64 i =0; i < len; i++){
  128. payload_data[i]= recBytes[i +14];
  129. }
  130. }else{
  131. Array.Copy(recBytes,2, masks,0,4);
  132. payload_data =newbyte[payload_len];
  133. Array.Copy(recBytes,6, payload_data,0, payload_len);
  134.  
  135. }
  136.  
  137. for(var i =0; i < payload_len; i++){
  138. payload_data[i]=(byte)(payload_data[i]^ masks[i %4]);
  139. }
  140. returnEncoding.UTF8.GetString(payload_data);
  141. }
  142.  
  143.  
  144. /// <summary>
  145. /// 打包服务器数据
  146. /// </summary>
  147. /// <param name="message">数据</param>
  148. /// <returns>数据包</returns>
  149. privatestaticbyte[]PackData(string message)
  150. {
  151. byte[] contentBytes =null;
  152. byte[] temp =Encoding.UTF8.GetBytes(message);
  153.  
  154. if(temp.Length<126){
  155. contentBytes =newbyte[temp.Length+2];
  156. contentBytes[0]=0x81;
  157. contentBytes[1]=(byte)temp.Length;
  158. Array.Copy(temp,0, contentBytes,2, temp.Length);
  159. }elseif(temp.Length<0xFFFF){
  160. contentBytes =newbyte[temp.Length+4];
  161. contentBytes[0]=0x81;
  162. contentBytes[1]=126;
  163. contentBytes[2]=(byte)(temp.Length&0xFF);
  164. contentBytes[3]=(byte)(temp.Length>>8&0xFF);
  165. Array.Copy(temp,0, contentBytes,4, temp.Length);
  166. }else{
  167. // 暂不处理超长内容
  168. }
  169.  
  170. return contentBytes;
  171. }
  172. }
  173. }

运行效果:

使用的浏览器:

下载代码:WebSocket.zip

疑问:如实例中

  1. responseBuilder.Append("Sec-WebSocket-Accept: "+ secKeyAccept +Environment.NewLine+Environment.NewLine);
  2. //如果把上一行换成下面两行,才是thewebsocketprotocol-17协议,但居然握手不成功,目前仍没弄明白!
  3. //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
  4. //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);

这是为什么呢?看到这篇博文的兄弟希望能够给我解惑!

目录
相关文章
|
7月前
|
设计模式 Java Spring
【Spring源码】WebSocket做推送动作的底层实例是谁
我们都知道WebSocket可以主动推送消息给用户,那做推送动作的底层实例究竟是谁?我们先整体看下整个模块的组织机构。可以看到handleMessage方法定义了每个消息格式采用不同的消息处理方法,而这些方法该类并**没有实现**,而是留给了子类去实现。
【Spring源码】WebSocket做推送动作的底层实例是谁
|
前端开发 JavaScript
React+Websocket简单实例
最近很多项目需要用到websocket,经过智能客服项目沉淀了一个简单的实例,以后可以直接用。有需要指教的地方可以联系我。
3386 0
|
JavaScript
js实现websocket实例
js实现websocket实例
248 0
|
消息中间件 JSON JavaScript
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
1878 0
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
|
XML Java 数据格式
java websocket简单实例绝对可用
坑爹的网友,java一个个的网上websocket例子都不写web.xml的配置,MD~这不是给别人挖坑吗?既然写例子就要完整啊!!! 需要注意的是:1.web.xml配置服务端的servlet。
2772 0
|
Web App开发 应用服务中间件 nginx
|
前端开发 Java JavaScript
【WebSocket】WebSocket经典实例
接着上一篇的环境,我们接下来弄了个WebSocketTest2 目录结构 jquery-1.12.3.js(贴心服务) WebSocketTest2.java package com.hust.websockettest; import java.io.IOException; import java.util.Queue; import java.util.
1944 0
|
Web App开发 前端开发 Go
html5+go+websocket简单实例代码
这次的就直接发放代码截图吧,应该是用go语言做后台一个简易的聊天,这里没用到什么特别的知识,最朴实的来实现效果,主要目的是分享下h5怎么用websocket,go搭建websocket服务的主要部分。   go代码部分: 1 // WebChat project main.
1219 0
|
Web App开发 应用服务中间件 C#
C#版Websocket实例
Demo地址:www.awbeci.xyz websocket有java、nodejs、python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.
2923 0