WEB消息提醒实现之⼆实现⽅式-websocket实现⽅式
#websocket实现⽅式
##原理
websocket的原理主要是，利⽤websocket提供的api，客户端只需要向服务器发起⼀次连接即可，然后服务器就可以主动地源源不断地向客户端发送数据，只要客户端不关闭浏览器，那么这个连接就会⼀直保持，从⽽达到真正意义上的长连接和服务器推。
优点：只需要建⽴⼀次连接，服务器就可以源源不断地推送数据，资源消耗少，持久连接
缺点：需要浏览器⽀持websocket技术
websocket的过程如图：
可以看到，只要客户端不关闭浏览器，连接会⼀直存在，相对于ajax轮询，这⾥服务器从被动变为主动，只要服务器喜欢，随时都可以向客户端发送数据。
##实例
websocket最经典的实例就是聊天室了，⽽且tomcat就⾃带了websocket聊天室的实例，需要导⼊websocket-api.jar，这个jar包也可以在tomcat的lib下到，下⾯是服务器代码：
j.websocket.servlet;
import java.io.IOException;
import java.util.Set;
import urrent.CopyOnWriteArraySet;
import urrent.atomic.AtomicInteger;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
//import org.apache.juli.logging.Log;
//import org.apache.juli.logging.LogFactory;
import util.HTMLFilter;
//"/websocket/chat"为客户端发起连接的请求路径
@ServerEndpoint(value ="/websocket/chat")
public class ChatAnnotation {
//private static final Log log = Log(ChatAnnotation.class);
private static final String GUEST_PREFIX ="Guest";
private static final AtomicInteger connectionIds =new AtomicInteger(0); private static final Set<ChatAnnotation> connections =
new CopyOnWriteArraySet<ChatAnnotation>();
private final String nickname;
private Session session;
public ChatAnnotation(){
//每个客户端都有⼀个昵称
nickname = GUEST_PREFIX + AndIncrement();
}
/**
* 客户端发起连接请求，服务器这边会调⽤这个start⽅法，
* 将该客户端的session和连接保存，然后向所有客户端⼴播消息
* @param session
*/
@OnOpen
public void start(Session session){
this.session = session;
connections.add(this);
String message = String.format("* %s %s", nickname,"has joined.");
broadcast(message);
}
/**
* 如果有客户端关闭浏览器，连接就会断开，服务器会调⽤end⽅法，
* 将保存在connections集合中的相应客户端连接移除，向剩余的客户端⼴播该 * 客户端下线的消息
*/
@OnClose
public void end(){
String message = String.format("* %s %s",
nickname,"has disconnected.");
broadcast(message);
}
/**
* 客户端调⽤send向服务器发送消息的时候，服务器这边会调⽤incoming⽅法， * 将该客户端发送的消息向所有客户端进⾏⼴播
* @param message
*/
@OnMessage
public void incoming(String message){
// Never trust the client
String filteredMessage = String.format("%s: %s",
nickname, HTMLFilter.String()));
broadcast(filteredMessage);
}
/**
* 出现异常时候会调⽤onError
* @param t
* @throws Throwable
*/
@OnError
public void onError(Throwable t)throws Throwable {
//("Chat Error: " + t.toString(), t);
}
/**
* 向所有客户端⼴播消息的⽅法
* @param msg
*/
public static void broadcast(String msg){
//遍历所有的客户端
for(ChatAnnotation client : connections){
try{
synchronized(client){
//向客户端推送消息
BasicRemote().sendText(msg);
}
}catch(IOException e){
//如果⼴播的时候出现异常会将该客户端移除，并向剩余的客户端⼴播消息
//log.debug("Chat Error: Failed to send message to client", e);
try{
client.session.close();
}catch(IOException e1){
// Ignore
}
String message = String.format("* %s %s",
client.nickname,"has been disconnected.");
broadcast(message);
}
}
}
}
下⾯是客户端的代码：
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="/1999/xhtml"lang="en">
<head>
<title>Apache Tomcat WebSocket Examples: Chat</title>
<style type="text/css">
input#chat{
width: 410px
}
#console-container{
width: 400px;
}
#console{
border: 1px solid #CCCCCC;
border-right-color: #999999;
border-bottom-color: #999999;
height: 170px;
overflow-y: scroll;
padding: 5px;
width: 100%;
}
#console p{
padding: 0;
margin: 0;
}
</style>
<script type="application/javascript">
var Chat ={};
Chat.socket =null;
//根据浏览器创建相应的websocket实例，并向服务器发起连接
if('WebSocket'in window){
Chat.socket =new WebSocket(host);
Chat.socket =new WebSocket(host);
}else if('MozWebSocket'in window){
Chat.socket =new MozWebSocket(host);
}else{
Console.log('Error: WebSocket is not supported by this browser.');
return;
}
//客户端websocket和服务器建⽴连接之后会调⽤onopen⽅法
pen=function(){
Console.log('Info: WebSocket connection opened.');
if(event.keyCode ==13){
Chat.sendMessage();
}
};
};
//监听服务器是否关闭，服务器关闭之后会调⽤onclose⽅法
lose=function(){
Console.log('Info: WebSocket closed.');
};
//监听服务器消息，服务器向客户端推送消息的时候，websocket会调⽤onmessage ⽅法websocket和socket
ssage=function(message){
Console.log(message.data);
};
});
//传⼊url，创建websocket并和服务器建⽴连接
Chat.initialize=function(){
if(window.location.protocol =='http:'){
}else{
}
};
//发送消息
Chat.sendMessage =(function(){
var message = ElementById('chat').value;
if(message !=''){
Chat.socket.send(message);
}
});
var Console ={};
//在消息版⾯显⽰服务器发送过来的消息
Console.log =(function(message){
var console = ElementById('console');
var p = ateElement('p');
p.style.wordWrap ='break-word';
p.innerHTML = message;
console.appendChild(p);
while(console.childNodes.length >25){
}
console.scrollTop = console.scrollHeight;
});
Chat.initialize();
document.addEventListener("DOMContentLoaded",function(){
// Remove elements with "noscript" class - <noscript> is not allowed in XHTML
var noscripts = ElementsByClassName("noscript");
for(var i =0; i < noscripts.length; i++){
noscripts[i].veChild(noscripts[i]);
}
},false);
</script>
</head>
<body>
<div class="noscript"><h2 >Seems your browser doesn't support Jav ascript! Websockets rely on Javascript being enabled. Pleas e enable
Javascript and reload this page!</h2></div>
<div>
<p>
<input type="text"placeholder="type and press enter to chat"id="chat"/>
</p>
</p>
<div id="console-container">
<div id="console"/>
</div>
</div>
</body>
</html>
如果要利⽤websocket按照前⾯实现消息提醒的话，可以在后来创建⼀个和定时器，在应⽤启动的时候就初始化定时器，定时在后台检测数据有没有发⽣变化，有变化之后随时调⽤websocket的⽅法，将数据推送给客户端。
下⾯是和定时器的代码
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论