在没有webSocket之前,在浏览器上实现服务端和客户端的通信,一般是使用的iframe、短轮询、长连接、comet等,但这些方法都没有webSocket方便稳定。要实现WebSocket需要浏览器和服务端均支持。HTML5里面的webSocket是客户端的实现,应用服务器是服务端的实现。Tomcat在7.0.27版本中加入了对webSocket的支持。
WebSocket可以无刷新的实现服务端信息到客户端的推送,适于用聊天、信息推送、股票信息等需要服务端主动将信息提供给客户端的地方。
一、Tomcat服务端实现
下面是Tomcat里面websocket的服务端实现,按tomcat官方的说法是由于现在的websocket的规范还没有完全制定完成,所以tomcat里面关于websocket的实现的相关API可能随时会改变。http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html
以下代码参考tomcat发布包里面的examples下面的websocket
注意:在编译代码的时候可能会出现找不到相关类的情况,这个时候是由于没有将tomcat的相关包引入到工程的classpath里面,通常在MyEclipse里面会出现此问题,使用eclipse时,会将tomcat的lib包加入到工程的classpath里面。
@WebServlet("/DemoWebSocket")
public class DemoWebSocket extends WebSocketServlet {
private static final long serialVersionUID = 1L;
private final Set connections = new CopyOnWriteArraySet();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
return new DemoMessageInbound();
}
private final class DemoMessageInbound extends MessageInbound {
@Override
protected void onOpen(WsOutbound outbound) {
connections.add(this);
String message = "websocket已经打开";
broadcast(message);
}
@Override
protected void onClose(int status) {
connections.remove(this);
String message = "webSocket关闭";
broadcast(message);
}
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
//在这里处理二进制数据
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// 这里处理的是文本数据
String filteredMessage = message.toString();
broadcast(filteredMessage);
}
//将数据传回客户端
private void broadcast(String message) {
for (DemoMessageInbound connection : connections) {
try {
CharBuffer buffer = CharBuffer.wrap(message);
connection.getWsOutbound().writeTextMessage(buffer);
} catch (IOException ignore) {
// Ignore
}
}
}
}
二、浏览器客户端实现
下面的代码的实现,只是简单的兼容chrome浏览器,对于其他浏览器未做兼容性测试,所以在其他浏览器下面可能不能正常运行。
//创建一个websocket的连接
var ws = new WebSocket("ws://localhost:8080/websocket/DemoWebSocket");
//当连接打开时的事件
ws.onopen = function(evt) {
console.log("Openened connection to websocket");
};
//当连接有信息时的事件
ws.onmessage = function(msg) {
$('#message').html(msg.data);
};
//向服务端发送信息
function send(){
ws.send($('#test').val());
}
示例代码下载:点击此处