HTML5:WebSocket实现
搞定这个的过程远比想象的困难许多。网上许多教程,一一尝试,大多随着库版本的改变以及浏览器对协议支持的改变以失败告终,即使成功的也语焉不详,以下为步骤。
1.运行环境
JavaEEIDE
apache-tomcat-7.0.29(7.0.27之后才支持websocket)
IE(版本:10.0.9200.16384)
Firefox(版本:15.0)
GoogleChrome(版本:23.0.1251.2)
2.详细步骤
(1)在JavaEEIDE中,File->New->DynamicWebProject,使其如下配置
Targetruntime中必须是ApacheTomcatv7.0,并且最好是引用7.0.29(可在NewRuntime中配置)
注意,点击Next->,再点击Next->,如下图,注意勾选Generateweb.xmldeploymentdescriptor,点击Finish
(2)在JavaResources下src下New->Class,如下图
再在src下New->Class,如下图
下面贴上上述类的代码
package com.trump.web.servlet;import java.util.ArrayList;import java.util.List;import java.util.logging.Logger;import javax.servlet.http.HttpServletRequest;import org.apache.catalina.websocket.StreamInbound;import org.apache.catalina.websocket.WebSocketServlet;public class EchoServlet extends WebSocketServlet {private static final long serialVersionUID = -4104682919545889813L;private Logger logger = Logger.getLogger(EchoServlet.class.getName());private static List<MyMessageInbound> socketList = new ArrayList<MyMessageInbound>();@Overrideprotected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {// TODO Auto-generated method stublogger.info("receive ws request");return new MyMessageInbound();}public static synchronized List<MyMessageInbound> getSocketList() {return socketList;}}
package com.trump.web.servlet;import java.io.IOException;import java.nio.ByteBuffer;import java.nio.CharBuffer;import java.util.logging.Logger;import org.apache.catalina.websocket.MessageInbound;import org.apache.catalina.websocket.WsOutbound;public class MyMessageInbound extends MessageInbound {private int userIdName = 0;private Logger logger = Logger.getLogger(MyMessageInbound.class.getName());public int getUserIdName() {return userIdName;}protected void onOpen(WsOutbound outbound) {super.onOpen(outbound);userIdName = outbound.hashCode();EchoServlet.getSocketList().add(this);logger.info("Server onOpen");}protected void onClose(int status) {EchoServlet.getSocketList().remove(this);super.onClose(status);logger.info("Server onClose");}// 有二进制消息数据到达,比如音频等文件传输@Overrideprotected void onBinaryMessage(ByteBuffer buffer) throws IOException {logger.info("Binary Message Receive: " + buffer.remaining());}@Overrideprotected void onTextMessage(CharBuffer buffer) throws IOException {String msgOriginal = buffer.toString();int startIndex = msgOriginal.indexOf("!@#$%");String nikeName = msgOriginal.substring(0, startIndex);String textMsg = msgOriginal.substring(startIndex + 5);// 将字符数组包装到缓冲区中// 给定的字符数组将支持新缓冲区;即缓冲区修改将导致数组修改,反之亦然String countMsg = EchoServlet.getSocketList().size() + "人同时在线";logger.info("Server onTextMessage: " + countMsg + nikeName + ":"+ textMsg);String msg1 = nikeName + ": " + textMsg;String msg2 = "我: " + textMsg;for (MyMessageInbound messageInbound : EchoServlet.getSocketList()) {CharBuffer msgBuffer1 = CharBuffer.wrap(msg1);CharBuffer msgBuffer2 = CharBuffer.wrap(msg2);WsOutbound outbound = messageInbound.getWsOutbound();if (messageInbound.getUserIdName() != this.getUserIdName()) {outbound.writeTextMessage(msgBuffer1);outbound.flush();} else {outbound.writeTextMessage(msgBuffer2);}}}}
(3)打开WebContent下WEB-INF下web.xml,编辑为
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID" version="3.0"><display-name>myWebSocket</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><servlet><servlet-name>echo</servlet-name><servlet-class>com.trump.web.servlet.EchoServlet</servlet-class></servlet><servlet-mapping><servlet-name>echo</servlet-name><url-pattern>*.ws</url-pattern></servlet-mapping></web-app>
(4)右击项目myWebSocket->RunAs->RunonServer,如下图,点击Finish,
可以看到Tomacat正常运行,如下图
(5)在任意位置新建一个客户端,命名为client.html,内容如下
<!DOCTYPE html><html><head><title>Web Socket Demo</title><script type="text/javascript">var ws = null;function startServer() {var url = "ws://127.0.0.1:8080/myWebSocket/echo.ws";if ('WebSocket' in window) {ws = new WebSocket(url);} else if ('MozWebSocket' in window) {ws = new MozWebSocket(url);} else {alert('Your browser Unsupported WebSocket!');return;}ws.onopen = function() {document.getElementById("content").innerHTML += 'websocket open! Welcome!<br />';};ws.onmessage = function(event) {document.getElementById("content").innerHTML += event.data + '<br />';};ws.onclose = function() {document.getElementById("content").innerHTML += 'websocket closed! Byebye!<br />';};}function sendMyMessage() {var nickName = document.getElementById('nickName');var textMessage = document.getElementById('textMessage');if (ws != null && textMessage.value != '') {ws.send(nickName.value + '!@#$%' + textMessage.value);textMessage.value = '';}}</script></head><body type="text" id="nickName" size="20" /><br /><input type="text" id="textMessage" size="20" /><input type="button" value="Send"><div id="content"></div></html>
(6)OK!打开浏览器,输入http://localhost:8080/webSocketTest/client.html
此时注意Tomcat打印出的信息,如下
3.WebSocket之所以受关注,是因为它的服务器端能主动发消息给客户端,即MyMessageInbound中onOpen函数可以让服务器做想做的事情。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。