DBMNG数据库管理与应用

所有存在都是独创。

目录 / 分类

数据库基础
Access
SQLServer
MySQL
SQLite
Oracle
PostgreSQL
移动应用
经验分享
服务器配置
网文摘录
下载中心
CUBRID数据库
验证/二维/条形码
当前位置：首页 > 经验分享 > Java组件

HTML 5 WebSocket实现实时视频文字传输(2)

客户端

在支持WebSocket的浏览器中，可以直接在Javascript中通过WebSocket对象来实现通信。WebSocket对象主要通过onopen，onmessage，onclose即onerror四个事件实现对socket消息的异步响应。

请创建静态页面 不用创建ruant=“server”的 否则会自动reload

01 <!DOCTYPE html>
02   
03 <html xmlns="http://www.w3.org/1999/xhtml">
04 <head>
05     <title></title>
06     <script type="text/javascript">
07         var wsServer = 'ws://localhost:9999/webSocket.ashx'; //基于.NET4.5服务器地址 
08         //var wsServer = 'ws://localhost:1818'; //基于.NET服务器地址 
09   
10         var websocket = new WebSocket(wsServer); //创建WebSocket对象 
11         //websocket.send("hello");//向服务器发送消息 
12         //alert(websocket.readyState);//查看websocket当前状态 
13         websocket.onopen = function (evt) { 
14             //已经建立连接 
15             alert("已经建立连接"); 
16         }; 
17         websocket.onclose = function (evt) { 
18             //已经关闭连接 
19             alert("已经关闭连接"); 
20         }; 
21         websocket.onmessage = function (evt) { 
22             //收到服务器消息，使用evt.data提取 
23             evt.stopPropagation() 
24             evt.preventDefault() 
25             //alert(evt.data); 
26             writeToScreen(evt.data); 
27             //websocket.close(); 
28         }; 
29         websocket.onerror = function (evt) { 
30             //产生异常 
31             //alert(evt.message); 
32             writeToScreen(evt.message); 
33         }; 
34         function sendMsg() { 
35             if (websocket.readyState == websocket.OPEN) { 
36                 msg = document.getElementById("msg").value; 
37                 websocket.send(msg); 
38                 writeToScreen("发送成功!"); 
39             } else { 
40                 writeToScreen("连接失败!"); 
41             } 
42         } 
43   
44         function writeToScreen(message) { 
45             var pre = document.createElement("p"); 
46             pre.style.wordWrap = "break-word"; 
47             pre.innerHTML += message; 
48             output.appendChild(pre); 
49         } 
50     </script>
51 </head>
52 <body>
53     <div>
54         <input type="text" id="msg" value="beyond is number one!" />
55         <button onclick="sendMsg()">send</button>
56     </div>
57     <div id="output"></div>
58 </body>
59 </html>


readyState表示连接有四种状态：

CONNECTING (0)：表示还没建立连接；

OPEN (1)： 已经建立连接，可以进行通讯；

CLOSING (2)：通过关闭握手，正在关闭连接；

CLOSED (3)：连接已经关闭或无法打开；

url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；

close 方法就是关闭连接；

onopen连接建立，即握手成功触发的事件；

onmessage收到服务器消息时触发的事件；

onerror异常触发的事件；

onclose关闭连接触发的事件；

先说说基于.NET4.5的吧 ashx里面应该是这样写的

01 //得到当前WebSocket请求 
02             HttpContext.Current.AcceptWebSocketRequest(async (context) => 
03             { 
04                 WebSocket socket = context.WebSocket;//Socket 
05                 while (true) 
06                 { 
07                     ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]); 
08                     CancellationToken token; 
09                     WebSocketReceiveResult result = 
10                             await socket.ReceiveAsync(buffer, token); 
11                     if (socket.State == WebSocketState.Open) 
12                     { 
13                         string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, 
14                                 result.Count); 
15                         userMessage = "You sent: " + userMessage + " at " + 
16                                 DateTime.Now.ToLongTimeString(); 
17                         buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage)); 
18                         await socket.SendAsync(buffer, WebSocketMessageType.Text, 
19                                 true, CancellationToken.None); 
20                     } 
21                     else { break; } 
22                 } 
23             });


然后需要注意的是 部署到IIS8上面  转到 Windows程序和功能 -打开Windows功能里面 IIS选项启动4.5 和WebSocket支持  否则会报错误的。

如果你不是Windows8 或者IIS的问题 你可以使用其他方式实现websocket服务器 比如.net socket模拟（因为websocket本身就是基于TCP的完全可以模拟只是规则特别..）

网上有人写了下面一段

001 class Program 
002   { 
003       static void Main(string[] args) 
004       { 
005           int port = 1818; 
006           byte[] buffer = new byte[1024]; 
007   
008           IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port); 
009           Socket listener = new Socket(localEP.Address.AddressFamily,SocketType.Stream, ProtocolType.Tcp); 
010              
011           try{ 
012               listener.Bind(localEP); 
013               listener.Listen(10); 
014   
015               Console.WriteLine("等待客户端连接...."); 
016               Socket sc = listener.Accept();//接受一个连接 
017               Console.WriteLine("接受到了客户端："+sc.RemoteEndPoint.ToString()+"连接...."); 
018                  
019               //握手 
020               int length = sc.Receive(buffer);//接受客户端握手信息 
021               sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length))); 
022               Console.WriteLine("已经发送握手协议了...."); 
023                  
024               //接受客户端数据 
025               Console.WriteLine("等待客户端数据...."); 
026               length = sc.Receive(buffer);//接受客户端信息 
027               string clientMsg=AnalyticData(buffer, length); 
028               Console.WriteLine("接受到客户端数据：" + clientMsg); 
029   
030               //发送数据 
031               string sendMsg = "您好，" + clientMsg; 
032               Console.WriteLine("发送数据：“"+sendMsg+"” 至客户端...."); 
033               sc.Send(PackData(sendMsg)); 
034                  
035               Console.WriteLine("演示Over!"); 
036   
037           } 
038           catch (Exception e) 
039           { 
040               Console.WriteLine(e.ToString()); 
041           } 
042       } 
043   
044       ///
045    
046       /// 打包握手信息 
047       ///  
048       /// Sec-WebSocket-Accept 
049       /// 数据包 
050       private static byte[] PackHandShakeData(string secKeyAccept) 
051       { 
052           var responseBuilder = new StringBuilder(); 
053           responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine); 
054           responseBuilder.Append("Upgrade: websocket" + Environment.NewLine); 
055           responseBuilder.Append("Connection: Upgrade" + Environment.NewLine); 
056           responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine); 
057           //如果把上一行换成下面两行，才是thewebsocketprotocol-17协议，但居然握手不成功，目前仍没弄明白！ 
058           //responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine); 
059           //responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine); 
060   
061           return Encoding.UTF8.GetBytes(responseBuilder.ToString()); 
062       } 
063   
064       ///
065    
066       /// 生成Sec-WebSocket-Accept 
067       ///  
068       /// 客户端握手信息 
069       /// Sec-WebSocket-Accept 
070       private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength) 
071       { 
072           string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength); 
073           string key = string.Empty; 
074           Regex r = new Regex(@"Sec\-WebSocket\-Key:(.*?)\r\n"); 
075           Match m = r.Match(handShakeText); 
076           if (m.Groups.Count != 0) 
077           { 
078               key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim(); 
079           } 
080           byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key +"258EAFA5-E914-47DA-95CA-C5AB0DC85B11")); 
081           return Convert.ToBase64String(encryptionString); 
082       } 
083   
084       ///
085    
086       /// 解析客户端数据包 
087       ///  
088       /// 服务器接收的数据包 
089       /// 有效数据长度 
090       ///  
091       private static string AnalyticData(byte[] recBytes, int recByteLength) 
092       { 
093           if (recByteLength < 2) { return string.Empty; } 
094   
095           bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最后一帧   
096           if (!fin){ 
097               return string.Empty;// 超过一帧暂不处理  
098           } 
099   
100           bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩码   
101           if (!mask_flag){ 
102               return string.Empty;// 不包含掩码的暂不处理 
103           } 
104   
105           int payload_len = recBytes[1] & 0x7F; // 数据长度   
106   
107           byte[] masks = new byte[4]; 
108           byte[] payload_data; 
109   
110           if (payload_len == 126){ 
111               Array.Copy(recBytes, 4, masks, 0, 4); 
112               payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]); 
113               payload_data = new byte[payload_len]; 
114               Array.Copy(recBytes, 8, payload_data, 0, payload_len); 
115   
116           }else if (payload_len == 127){ 
117               Array.Copy(recBytes, 10, masks, 0, 4); 
118               byte[] uInt64Bytes = new byte[8]; 
119               for (int i = 0; i < 8; i++){ 
120                   uInt64Bytes[i] = recBytes[9 - i]; 
121               } 
122               UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0); 
123   
124               payload_data = new byte[len]; 
125               for (UInt64 i = 0; i < len; i++){ 
126                   payload_data[i] = recBytes[i + 14]; 
127               } 
128           }else{ 
129               Array.Copy(recBytes, 2, masks, 0, 4); 
130               payload_data = new byte[payload_len]; 
131               Array.Copy(recBytes, 6, payload_data, 0, payload_len); 
132   
133           } 
134   
135           for (var i = 0; i < payload_len; i++){ 
136               payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]); 
137           } 
138              
139           return Encoding.UTF8.GetString(payload_data); 
140       } 
141   
142   
143       ///
144    
145       /// 打包服务器数据 
146       ///  
147       /// 数据 
148       /// 数据包 
149       private static byte[] PackData(string message) 
150       { 
151           byte[] contentBytes = null; 
152           byte[] temp = Encoding.UTF8.GetBytes(message); 
153   
154           if (temp.Length < 126){ 
155               contentBytes = new byte[temp.Length + 2]; 
156               contentBytes[0] = 0x81; 
157               contentBytes[1] = (byte)temp.Length; 
158               Array.Copy(temp, 0, contentBytes, 2, temp.Length); 
159           }else if (temp.Length < 0xFFFF){ 
160               contentBytes = new byte[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   }


或者参考这里

ok! 基本上能实现传输文字了,接下来是图像 可以通过base64编码的方式传输 也可以通过二进制传输

上一篇：JDBC数据库连接池的简单实现
下一篇：HTML5WebSocket实现实时视频文字传输
本站文章内容，部分来自于互联网，若侵犯了您的权益，请致邮件chuanghui423#sohu.com(请将#换为@)联系，我们会尽快核实后删除。
Copyright © 2006-2025 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号