HTML5拥有一些非常棒的特性,其中就包括了websockets。这个标准非常容易识别,你可以从ws://和wss://(安全的websockets URL)前缀中分辨出来,这样就可以启动“服务端的事件推送”。
如果大家深入的了解一下的话,这里有一些非常有趣的内容。如果你深入学习HTML5,你绝对应该尝试一下websockets!在个人看来,这是最酷的HTML5技术。在大家正式开始了解HTML5的websocket之前,让我们了解一下:
websocket启动了服务器端web应用双向交流处理的功能(这里查看API)。典型的应用如下:
以前,最常用的方法就是使用comet,或者轮询(Polling)。客户端不停的查询服务器端的相关状态。但是这里也有一些负面的影响,最重要的是:
- 加重了服务器端负载
- 信息不能及时的到达,肯定有一些延迟
如果需要开发一个web应用支持类似的功能,websocket是你的最佳选择!
首先呢,我们得先明白,我们需要让浏览器支持相关的websocket协议。如果你关注的话,肯定知道目前只有firefox,chrome,webkit支持websocket。
服务器端
服务器端同样也需要支持,如下:
- 必须在线
- 支持ws://和wss://
- 监听指定端口的连接
- 支持正确的“握手”(handshake)
客户端代码
一旦你了解了服务器端和客户端,使用websocket非常简单,首先定义一个websocket URL:
- var WEBSOCKET_URL ="ws://[YourHost]:[YourPort]/";
当然你需要修改以上的yourhost为你自己的主机,yourport设置自己的端口。然后判断是否支持websocket协议:
- var support ="MozWebSocket"in window ?'MozWebSocket':("WebSocket"in window ?'WebSocket':null);
- if(support ==null){
- alert("你的浏览器不支持Websockets.");
- return;
- }
下面是创建连接:
- var ws =new window[support](WEBSOCKET_URL);
这里,浏览器将使用给定的websocket URL开启一个websocketconnection,下面两个方法将用于判断websocket是否建立:
- // Called when the connection to the server is opened.
- ws.onopen =function(){
- alert("Connection with server open.");
- };
- // Called when the connection to the server is closed.
- ws.onclose =function(){
- alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy.");
- };
如果我们假设服务器已经成功的连接,那么另外两个方法将帮助我们完整地控制websocket,第一个是onmessage方法:第二个是send方法:
- // When the server is sending data to this socket, this method is called
- ws.onmessage =function(evt){
- // Received data is a string; We parse it to a JSON object using jQuery
- // http://api.jquery.com/jQuery.parseJSON/
- var jsonObject = $.parseJSON(evt.data);
- // Do something with the JSON object
- };
- // Creates an object that will be sent to the server
- var myObject ={
- Property:"Value",
- AnotherProperty:"AnotherValue"
- };
- // We need to stringify it through JSON before sending it to the server
- ws.send(JSON.stringify(myJsonObject));
因为我们不能发送JSON对象作为真正的JSON对象到服务器,我们需要字符化(serialize)然后才可以使用。
同时这也得需要在接受数据时处理,将字符串转化成JSON数据对象。这里我们使用jQuery的$.parseJSON方法来实现。
服务器端代码
这里比较有意思,这里有好几种websocket服务器实现的方式。这里有Java实现方式(Java implementations),在这篇文章里我们使用.net(SuperWebSocket )来实现。下面是主要代码:
- // List which contains the information about the several socket connections
- privateList<WebSocketSession> _sessions =newList<WebSocketSession>();
- // Method to create the WebsocketServer
- privatevoidStartWebsocketServer(){
- var socketServer =SocketServerManager.GetServerByName("SuperWebSocket")asWebSocketServer;
- socketServer.NewMessageReceived+=OnNewMessageReceived;
- socketServer.NewSessionConnected+=OnNewSessionConnected;
- socketServer.SessionClosed+=OnSessionClosed;
- }
- // Event which is called when a new client is connected
- voidOnNewSessionConnected(WebSocketSession session){
- _sessions.Add(session);
- }
- // Event which is called when a client disconnects
- voidOnSessionClosed(WebSocketSession session,SuperSocket.SocketBase.CloseReason e){
- _sessions.Remove(session);
- }
- // Event which is called when a message from the client is received
- voidOnNewMessageReceived(WebSocketSession session,string e){
- var cSharpObject =JsonConvert.DeserializeObject<CSharpObject>(e);
- foreach(var s in _sessions){
- s.SendResponseAsync(JsonConvert.SerializeObject(cSharpObject));
- }
- }
这段代码比较清楚,三个非常简单的方法来处理服务器端和客户端的事件。
使用Newton-King的类库来处理C#对象到JSON对象的序列化。相信大家会觉得代码比较容易理解。
总结
websocket非常震撼,也非常有魅力,不过很可惜的是支持的浏览器比较有限,相信随着浏览器的发展和HTML5的完善,websocket未来会变得更加的成熟和易于使用。如果你还没有机会摆弄一下websocket的话,建议你试试吧,相信你一定会喜欢的!
相关标签: