HTML5之WebSoket——html5+java servlet实现

来源：互联网发布：小语网络加速器编辑：程序博客网时间：2024/06/16 00:39

一、概念

在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。（详情见百度百科。）

二、websocket与Ajax的区别

Ajax是短连接,每次使用都需要进行一轮握手和关闭连接操作,效率慢,耗费资源,更适合在进行简短、临时交互的场景使用。

websokcet是长连接,可以一个页面使用一个WebSoket,一次开关即可,在这期间可以进行服务器和客户端的实时交互,适合在服务器向客户端不定时推送数据的场景使用,如消息通知，在线聊天等。

三、JAVA后端

要使用websoket, 服务器的tomcat必须在7.0以上,建议在7.5以上

如果您的tomcat在7.0以上,却又缺少websocket一系列的jar包（一般是自带的）,请加入以下jar包：

websoket-api(这里面有两个jar，都需要加入)

tomcat-coyote-7.0.41.jar

建立一个WebsoketServlet 如下：

package com.gw.websocket;import java.io.IOException;import java.nio.ByteBuffer;import java.nio.CharBuffer;import java.util.logging.Logger;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServletRequest;import org.apache.catalina.websocket.MessageInbound;import org.apache.catalina.websocket.StreamInbound;import org.apache.catalina.websocket.WebSocketServlet;import org.apache.catalina.websocket.WsOutbound;@WebServlet(urlPatterns = "/login.ws")public class HomePageServlet extends WebSocketServlet {// Logprivate Logger logger = Logger.getLogger(HomePageServlet.class.getName());@Overrideprotected StreamInbound createWebSocketInbound(String arg0,HttpServletRequest arg1) {// Loglogger.info("request ws servlet");// 方法仍然是返回一个StreamInbound实例，这里采用实现他的子类MessageInbound// 只用实现下面四个事件处理函数(其实onClose和onOpen有缺省实现)return new MessageInbound() {// WebSocket关闭事件，参数status应该来自org.apache.catalina.websocket.Constants中定义的几个常量，可以参考文档或者核对一下Tomcat的源码@Overrideprotected void onClose(int status) {// Loglogger.info("Web Socket Closed: " + status);}// WebSocket握手完成，创建完毕，WsOutbound用于向客户端发送数据@Overrideprotected void onOpen(WsOutbound outbound) {// Loglogger.info("Web Socket Open!");}@Overrideprotected void onBinaryMessage(ByteBuffer buffer)throws IOException {// Loglogger.info("Binary Message Receive: " + buffer.remaining());// Nothing}@Overrideprotected void onTextMessage(CharBuffer buffer)throws IOException {// Loglogger.info("Text Message Receive: " + buffer.remaining());// getWsOutbound可以返回当前的WsOutbound，通过他向客户端回传数据，这里采用的是nio的CharBuffergetWsOutbound().writeTextMessage(buffer);}};}}

为了方便,这里的onTextMessage将客户端发来的buffer原封不动的发回去来检测连接,到这里,完毕,启动tomcat即可。

这个servlet的路径是 /login.ws 写在类名上的注解里。

四、html

<!DOCTYPE html><html><head> <title>Web Socket Demo</title> <script type="text/javascript"> var  ws = null; function startServer() {// 设定WebSocket,注意协议是ws，请求是指向对应的WebSocketServlet的var url = "ws://127.0.0.1:8020/WALLE/login.ws";// 创建WebSocket实例，下面那个MozWebSocket是Firefox的实现if ('WebSocket' in window) { ws = new WebSocket(url);} else if ('MozWebSocket' in window) { ws = new MozWebSocket(url); } else { alert('此浏览器不支持WebSokcet,请更换浏览器使用,谢谢！.'); return; }// WebSocket握手完成，连接成功的回调ws.onopen = function() { //alert('Opened!');         };        // 收到服务器发送的文本消息, event.data表示文本内容ws.onmessage = function(event) { alert('Receive message: ' + event.data); };// 关闭WebSocket的回调ws.onclose = function() {//alert('Closed!'); };}function sendMyMessage() {//var textMessage = document.getElementById('textMessage').value;var msg=JSON.stringify({           username:"nihao",           password:"123456"        });ws.send(msg);//if(ws != null && textMessage != '') {//// 通过WebSocket想向服务器发送一个文本信息//ws.send(textMessage);//}}</script></head><body onload="startServer()"> <input type="text" id="textMessage" size="20" /><input type="button" onclick="sendMyMessage()" value="Send"></body> </html>

0 0