HTML5 WebSocket使用详解

1.使用Ider+Tomcat8环境进行演示  参考：http://blog.csdn.net/admin_yi/article/details/54375220

2.创建一个Servlet用于接收客户端的请求数据，并进行处理

 
 
packagecom.dong.base.serlvet;
 
 
/**
 
 
* Created by Administrator on 2017/8/21.
 
 
*/
 
 
importjava.io.IOException;
 
 
importjavax.websocket.OnClose;
 
 
importjavax.websocket.OnMessage;
 
 
importjavax.websocket.OnOpen;
 
 
importjavax.websocket.Session;
 
 
importjavax.websocket.server.ServerEndpoint;
 
 
/**
 
 
* 在tomcat7中存在WebSocketServlet类（但已经过时），在tomcat8中彻底删除
 
 
* 此处使用@ServerEndpoint注解，主要是将目前的类定义成一个websocket服务器端
 
 
* 注解的值将被用于监听用户连接的终端访问URL地址
 
 
*/
 
 
@ServerEndpoint("/websocket")
 
 
public classWebSocketTest {
 
 
/**
 
 
* 当服务器接收到客户端发送的消息时所调用的方法
 
 
* 该方法可能包含一个javax.websocket.Session可选参数
 
 
* 如果有这个参数，容器将会把当前发送消息客户端的连接Session注入进去
 
 
*/
 
 
@OnMessage
 
 
public voidonMessage(String message,Session session)throwsIOException, InterruptedException {
 
 
// 打印从客户端获取到的信息
 
 
System.out.println("从客户端接收到的信息: "+ message);
 
 
//向客户端第一次发送信息
 
 
session.getBasicRemote().sendText("=======向客户端第一次发送信息=======");
 
 
//每秒向客户端发送一次信息，连续发送3次
 
 
intsentMessages =0;
 
 
while(sentMessages <3) {
 
 
Thread.sleep(1000);
 
 
session.getBasicRemote().sendText("即时发送信息，当前是第 "+ sentMessages+"次…");
 
 
sentMessages++;
 
 
}
 
 
// 向客户端发送最后一次信息
 
 
session.getBasicRemote().sendText("=======向客户端发送最后一次信息=======");
 
 
}
 
 
/**
 
 
* 当一个新用户连接时所调用的方法
 
 
* 该方法可能包含一个javax.websocket.Session可选参数
 
 
* 如果有这个参数，容器将会把当前发送消息客户端的连接Session注入进去
 
 
*/
 
 
@OnOpen
 
 
public voidonOpen(Session session) {
 
 
System.out.println("客户端连接成功");
 
 
}
 
 
/** 当一个用户断开连接时所调用的方法*/
 
 
@OnClose
 
 
public voidonClose() {
 
 
System.out.println("客户端关闭");
 
 
}
 
 
}
 
 

3.在HTML5 页面中使用WebSocket与服务器端进行交互

HTML5 WebSocket测试

varwebSocket=newWebSocket('ws://localhost:8080/WebSocket/websocket');

webSocket.onerror=function(event) {

alert(event.data);

};

//与WebSocket建立连接

webSocket.onopen=function(event) {

document.getElementById('messages').innerHTML='与服务器端建立连接';

};

//处理服务器返回的信息

webSocket.onmessage=function(event) {

document.getElementById('messages').innerHTML += '
'+ event.data;

};

function start() {

//向服务器发送请求

webSocket.send('我是jCuckoo');

}