基于Tomcat运行HTML5 WebSocket echo实例详解

发表于2015-11-16
评论4 1.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

 

  一、概述

 

  作为HTML5新特性之一的WebSocket组件,在实时性有一定要求的WEB应用开发中还是有一定用武之地,高版本的IE、Chrome、FF浏览器都支持Websocket,标准的Websocket通信是基于RFC6455实现服务器端与客户端握手与消息接发的。如果对Websocket通信不是太理解,可以查看RFC文档即可,简单说就是通过发送HTTP请求,实现双方握手,将无状态的HTTP通信协议进一步升级成有状态的通信协议,同时Websocket还支持子协议选项与安全传输。标准的websocket连接URL以ws开头,如果是基于TLS的则以wss开头。基于Websocket可以很方便的开发基于web聊天程序,各种网页消息通知与推送通知。

 

  如果非要扒一扒Websocket的今生前世的话,还记得最早的基于HTTP轮询实现网页即时通信的方式,那种做法比较消耗资源、于是有人改进了编程CometD长连接方式,可是本质上还是换汤不换药,而websocket的出现正好解决了这些问题,但是很多浏览器的低版本还是不支持websocket,于是还催生了一些基于websocket理念实现的JS通信框架,其中学得比较像的有SockJS与socket.io,他们都号称支持websocket,然后如果浏览器端不支持原生的websocket,它们会自动启用fallback选项使用其它诸如ajax、Http轮询、长轮询/连接、甚至是flash的socket等机制实现模拟websocket的工作方式,但是他们最大的弊端是如果客户端使用了这些框架,服务器必须用它们,否则等待开发者就是一大堆无法回避的问题,同时很多都是无解的。主要原因在于它们实现自己的协议集,不照它们的格式处理数据没法玩。闲话说的有点多。

 

  二、实现步骤

 

  Tomcat7的高版本中实现了Websocket服务器端RFC6455标准协议,可以跟浏览器端websocket进行通信,首先要做好如下几步:

 

  1.安装高版本JDK – JDK8

  2.安装Tomcat 7.0.64

  3.在eclipse中建立一个动态的web项目

 

  根据JSR标准,Java中实现websocket的标准接口可以基于注解方式,tomcat也搞好了,只有我们实现如下代码,即可创建一个websocket回声服务器:

01package com.websocket.demo; 
02    
03import java.io.IOException; 
04import java.nio.ByteBuffer; 
05    
06import javax.websocket.OnMessage; 
07import javax.websocket.OnOpen; 
08import javax.websocket.Session; 
09import javax.websocket.server.ServerEndpoint; 
10    
11@ServerEndpoint(value = "/echo") 
12public class EchoExample { 
13        
14    @OnMessage 
15    public void echoTextMessage(Session session, String msg, boolean last) { 
16        try { 
17            if (session.isOpen()) { 
18                System.out.println("received from client message = " + msg); 
19                session.getBasicRemote().sendText(msg, last); 
20            } 
21        } catch (IOException e) { 
22            try { 
23                session.close(); 
24            } catch (IOException e1) { 
25            } 
26        } 
27    } 
28        
29    @OnOpen 
30    public void openConn(Session session) throws IOException { 
31        session.getBasicRemote().sendText("hello web socket"); // means open it 
32    } 
33        
34    @OnMessage 
35    public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) { 
36        System.out.println("send binary message..."); 
37        try { 
38            if (session.isOpen()) { 
39                System.out.println("byte buffer lenghth : " + bb.array().length); 
40                System.out.println("byte buffer content: " + ((bb.array()[0]) & 0xff)); 
41                System.out.println("byte buffer content: " + ((bb.array()[1]) & 0xff)); 
42                System.out.println("byte buffer content: " + ((bb.array()[2]) & 0xff)); 
43                session.getBasicRemote().sendBinary(bb, last); 
44            } 
45        } catch (IOException e) { 
46            try { 
47                session.close(); 
48            } catch (IOException e1) { 
49                // Ignore 
50            } 
51        } 
52    } 
53    
54}


  如何在tomcat中启动websocket服务器,首先需要在web.xml添加如下配置:

1[listener] 
2    [listener-class]org.apache.tomcat.websocket.server.WsContextListener[/listener-class] 
3[/listener]


  然后实现ServerApplicationConfig接口,实现如下:

  创建网页echo.html,内容如下:

01[html]
02[head]
03[title>Web Socket Echo Test[/title]
04[script]
05        var ws = null; 
06        var count = 0; 
07        function setConnected(connected) { 
08            document.getElementById('connect').disabled = connected; 
09            document.getElementById('disconnect').disabled = !connected; 
10            document.getElementById('echo').disabled  = !connected; 
11        } 
12    
13        function connect() { 
14            var target = document.getElementById('target').value; 
15            if (target == '') { 
16                alert('Please select server side connection implementation.'); 
17                return; 
18            } 
19    
20            if ('WebSocket' in window) { 
21                ws = new WebSocket(target); 
22            } else if ('MozWebSocket' in window) { 
23                ws = new MozWebSocket(target); 
24            } else { 
25                alert('WebSocket is not supported by this browser.'); 
26                return; 
27            } 
28                
29            ws.onopen = function () { 
30                setConnected(true); 
31                log('Info: WebSocket connection opened.'); 
32            }; 
33            ws.onmessage = function (event) { 
34                log('Received: ' + event.data);

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台