温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5:WebSocket实现

发布时间:2020-07-28 02:11:49 来源:网络 阅读:478 作者:更深的黄 栏目:移动开发

搞定这个的过程远比想象的困难许多。网上许多教程,一一尝试,大多随着库版本的改变以及浏览器对协议支持的改变以失败告终,即使成功的也语焉不详,以下为步骤。

1. 运行环境

Java EE IDE

apache-tomcat-7.0.29(7.0.27之后才支持websocket)

IE(版本:10.0.9200.16384)

Firefox(版本:15.0)

Google Chrome(版本:23.0.1251.2)

 

2. 详细步骤

(1) 在Java EE IDE中,File->New->Dynamic Web Project,使其如下配置

Target runtime中必须是Apache Tomcat v7.0,并且最好是引用7.0.29(可在New Runtime中配置)

HTML5:WebSocket实现

注意,点击Next->,再点击Next->,如下图,注意勾选Generate web.xml deployment descriptor,点击Finish

HTML5:WebSocket实现

(2) 在Java Resources下src下New->Class,如下图

HTML5:WebSocket实现

再在src下New->Class,如下图

HTML5:WebSocket实现

下面贴上上述类的代码

 
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>();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
// TODO Auto-generated method stub
logger.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");
}
// 有二进制消息数据到达,比如音频等文件传输
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
logger.info("Binary Message Receive: " + buffer.remaining());
}
@Override
protected 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->Run As->Run on Server,如下图,点击Finish,

HTML5:WebSocket实现

可以看到Tomacat正常运行,如下图

HTML5:WebSocket实现

(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

HTML5:WebSocket实现

此时注意Tomcat打印出的信息,如下

HTML5:WebSocket实现

 

3. WebSocket之所以受关注,是因为它的服务器端能主动发消息给客户端,即MyMessageInbound中onOpen函数可以让服务器做想做的事情。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI