WebSocket简单使用(四) - 完整实例-DBMNG数据库管理与应用网

目录 / 分类

数据库基础

Access

SQLServer

MySQL

SQLite

Oracle

PostgreSQL

移动应用

经验分享

服务器配置

网文摘录

下载中心

软件下载

CUBRID数据库

介绍及使用

验证/二维/条形码

当前位置：首页 > 经验分享 > HTML5

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

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

客户端代码：


	
	
		<html>
	

	
		<head>
	

	
		 <meta charset="UTF-8">
	

	
		 <title>Web sockets test</title>
	

	
		 <script src="jquery-min.js" type="text/javascript"></script>
	

	
		 <script type="text/javascript">
	

	
		 var ws;
	

	
		 function ToggleConnectionClicked() { 
	

	
		 try {
	

	
		 ws = new WebSocket("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); 
	

	
		 }
	

	
		 };
	

	
		 
	

	
		 function SendData() {
	

	
		 try{
	

	
		 ws.send("beston");
	

	
		 }catch(ex){
	

	
		 alert(ex.message);
	

	
		 }
	

	
		 };
	

	
		 
	

	
		 function seestate(){
	

	
		 alert(ws.readyState);
	

	
		 }
	

	
		 
	

	
		 </script>
	

	
		</head>
	

	
		<body>
	

	
		 <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button><br /><br />
	

	
		 <button id='ToggleConnection' type="button" onclick='SendData();'>发送我的名字：beston</button><br /><br />
	

	
		 <button id='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
	

	
		{
	

	
		 class Program
	

	
		 {
	

	
		 static void Main(string[] args)
	

	
		 {
	

	
		 int port = 1818;
	

	
		 byte[] buffer = new byte[1024];
	

	
		 
	

	
		 IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port);
	

	
		 Socket listener = new Socket(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>
	

	
		 private static byte[] PackHandShakeData(string secKeyAccept)
	

	
		 {
	

	
		 var responseBuilder = new StringBuilder();
	

	
		 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);
	

	
		 
	

	
		 return Encoding.UTF8.GetBytes(responseBuilder.ToString());
	

	
		 }
	

	
		 
	

	
		 /// <summary>
	

	
		 /// 生成Sec-WebSocket-Accept
	

	
		 /// </summary>
	

	
		 /// <param name="handShakeText">客户端握手信息</param>
	

	
		 /// <returns>Sec-WebSocket-Accept</returns>
	

	
		 private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
	

	
		 {
	

	
		 string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
	

	
		 string key = string.Empty;
	

	
		 Regex r = new Regex(@"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"));
	

	
		 return Convert.ToBase64String(encryptionString);
	

	
		 }
	

	
		 
	

	
		 /// <summary>
	

	
		 /// 解析客户端数据包
	

	
		 /// </summary>
	

	
		 /// <param name="recBytes">服务器接收的数据包</param>
	

	
		 /// <param name="recByteLength">有效数据长度</param>
	

	
		 /// <returns></returns>
	

	
		 private static string AnalyticData(byte[] recBytes, int recByteLength)
	

	
		 {
	

	
		 if (recByteLength < 2) { return string.Empty; }
	

	
		 
	

	
		 bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最后一帧 
	

	
		 if (!fin){
	

	
		 return string.Empty;// 超过一帧暂不处理 
	

	
		 }
	

	
		 
	

	
		 bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩码 
	

	
		 if (!mask_flag){
	

	
		 return string.Empty;// 不包含掩码的暂不处理
	

	
		 }
	

	
		 
	

	
		 int payload_len = recBytes[1] & 0x7F; // 数据长度 
	

	
		 
	

	
		 byte[] masks = new byte[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 = new byte[payload_len];
	

	
		 Array.Copy(recBytes, 8, payload_data, 0, payload_len);
	

	
		 
	

	
		 }else if (payload_len == 127){
	

	
		 Array.Copy(recBytes, 10, masks, 0, 4);
	

	
		 byte[] uInt64Bytes = new byte[8];
	

	
		 for (int i = 0; i < 8; i++){
	

	
		 uInt64Bytes[i] = recBytes[9 - i];
	

	
		 }
	

	
		 UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);
	

	
		 
	

	
		 payload_data = new byte[len];
	

	
		 for (UInt64 i = 0; i < len; i++){
	

	
		 payload_data[i] = recBytes[i + 14];
	

	
		 }
	

	
		 }else{
	

	
		 Array.Copy(recBytes, 2, masks, 0, 4);
	

	
		 payload_data = new byte[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]);
	

	
		 }
	

	
		 
	

	
		 return Encoding.UTF8.GetString(payload_data);
	

	
		 }
	

	
		 
	

	
		 
	

	
		 /// <summary>
	

	
		 /// 打包服务器数据
	

	
		 /// </summary>
	

	
		 /// <param name="message">数据</param>
	

	
		 /// <returns>数据包</returns>
	

	
		 private static byte[] PackData(string message)
	

	
		 {
	

	
		 byte[] contentBytes = null;
	

	
		 byte[] temp = Encoding.UTF8.GetBytes(message);
	

	
		 
	

	
		 if (temp.Length < 126){
	

	
		 contentBytes = new byte[temp.Length + 2];
	

	
		 contentBytes[0] = 0x81;
	

	
		 contentBytes[1] = (byte)temp.Length;
	

	
		 Array.Copy(temp, 0, contentBytes, 2, temp.Length);
	

	
		 }else if (temp.Length < 0xFFFF){
	

	
		 contentBytes = new byte[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);

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

上一篇：HTML5中的数字类型的输入框：数字选择器
下一篇：WebSocket简单使用(三) - 服务器端