HTML5

HTML5拥有一些非常棒的特性，其中就包括了websockets。这个标准非常容易识别，你可以从ws://和wss://（安全的websockets URL）前缀中分辨出来，这样就可以启动“服务端的事件推送”。

如果大家深入的了解一下的话，这里有一些非常有趣的内容。如果你深入学习HTML5，你绝对应该尝试一下websockets！在个人看来，这是最酷的HTML5技术。在大家正式开始了解HTML5的websocket之前，让我们了解一下：

WebSockets的9大杀手级功能

websocket启动了服务器端web应用双向交流处理的功能（这里查看API）。典型的应用如下：

• 聊天应用（API）
• 多人游戏，例如 Quake 2
• 实时数据相关的应用，例如，股票市场

以前，最常用的方法就是使用comet，或者轮询（Polling）。客户端不停的查询服务器端的相关状态。但是这里也有一些负面的影响，最重要的是：

• 加重了服务器端负载
• 信息不能及时的到达，肯定有一些延迟

如果需要开发一个web应用支持类似的功能，websocket是你的最佳选择！

首先呢，我们得先明白，我们需要让浏览器支持相关的websocket协议。如果你关注的话，肯定知道目前只有firefox，chrome，webkit支持websocket。

服务器端

服务器端同样也需要支持，如下：

• 必须在线
• 支持ws://和wss://
• 监听指定端口的连接
• 支持正确的“握手”（handshake）

客户端代码

一旦你了解了服务器端和客户端，使用websocket非常简单，首先定义一个websocket URL：

1. var WEBSOCKET_URL ="ws://[YourHost]:[YourPort]/";

当然你需要修改以上的yourhost为你自己的主机，yourport设置自己的端口。然后判断是否支持websocket协议：

1. var support ="MozWebSocket"in window ?'MozWebSocket':("WebSocket"in window ?'WebSocket':null);
2. if(support ==null){
3. alert("你的浏览器不支持Websockets.");
4. return;
5. }

 

下面是创建连接：

1. var ws =new window[support](WEBSOCKET_URL);

这里，浏览器将使用给定的websocket URL开启一个websocketconnection，下面两个方法将用于判断websocket是否建立：

1. // Called when the connection to the server is opened.
2. ws.onopen =function(){
3. alert("Connection with server open.");
4. };
6. // Called when the connection to the server is closed.
7. ws.onclose =function(){
8. alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy.");
9. };

 

 

如果我们假设服务器已经成功的连接，那么另外两个方法将帮助我们完整地控制websocket，第一个是onmessage方法：第二个是send方法：

1. // When the server is sending data to this socket, this method is called
2. ws.onmessage =function(evt){
4. // Received data is a string; We parse it to a JSON object using jQuery
5. // http://api.jquery.com/jQuery.parseJSON/
6. var jsonObject = $.parseJSON(evt.data);
8. // Do something with the JSON object
9. };
12. // Creates an object that will be sent to the server
13. var myObject ={
14. Property:"Value",
15. AnotherProperty:"AnotherValue"
16. };
18. // We need to stringify it through JSON before sending it to the server
19. ws.send(JSON.stringify(myJsonObject));

 

因为我们不能发送JSON对象作为真正的JSON对象到服务器，我们需要字符化（serialize）然后才可以使用。

同时这也得需要在接受数据时处理，将字符串转化成JSON数据对象。这里我们使用jQuery的$.parseJSON方法来实现。

服务器端代码

这里比较有意思，这里有好几种websocket服务器实现的方式。这里有Java实现方式（Java implementations），在这篇文章里我们使用.net（SuperWebSocket ）来实现。下面是主要代码：

1. // List which contains the information about the several socket connections
2. privateList<WebSocketSession> _sessions =newList<WebSocketSession>();
4. // Method to create the WebsocketServer
5. privatevoidStartWebsocketServer(){
6. var socketServer =SocketServerManager.GetServerByName("SuperWebSocket")asWebSocketServer;
7. socketServer.NewMessageReceived+=OnNewMessageReceived;
8. socketServer.NewSessionConnected+=OnNewSessionConnected;
9. socketServer.SessionClosed+=OnSessionClosed;
10. }
12. // Event which is called when a new client is connected
13. voidOnNewSessionConnected(WebSocketSession session){
14. _sessions.Add(session);
15. }
17. // Event which is called when a client disconnects
18. voidOnSessionClosed(WebSocketSession session,SuperSocket.SocketBase.CloseReason e){
19. _sessions.Remove(session);
20. }
22. // Event which is called when a message from the client is received
23. voidOnNewMessageReceived(WebSocketSession session,string e){
24. var cSharpObject =JsonConvert.DeserializeObject<CSharpObject>(e);
25. foreach(var s in _sessions){
26. s.SendResponseAsync(JsonConvert.SerializeObject(cSharpObject));
27. }
28. }

 

这段代码比较清楚，三个非常简单的方法来处理服务器端和客户端的事件。

使用Newton-King的类库来处理C#对象到JSON对象的序列化。相信大家会觉得代码比较容易理解。

总结

websocket非常震撼，也非常有魅力，不过很可惜的是支持的浏览器比较有限，相信随着浏览器的发展和HTML5的完善，websocket未来会变得更加的成熟和易于使用。如果你还没有机会摆弄一下websocket的话，建议你试试吧，相信你一定会喜欢的！

相关标签：

• HTML5
• websocket

via Working with Websockets