一个注解方式webSocket demo

前段时间在研究websocket.其中遇到了一些bug。这里跟大家分享这过程。

首先介绍一下websocket

WebSocket是HTML5的一种新协议，实现了浏览器和服务器的双全工通信，能更好的节省服务器资源和带宽并达到实时通信。同时WebSocket是建立在TCP之上，同HTTP一样通过TCP来通信。WebSocket需要类似TCP的客户端和服务端的握手连接然后进行通信。但websocket与传统的HTTP每次请求-应答都需要客户端和服务端建立连接模式不同的是websocket类似socket的TCP长连接的通讯模式，在客户端断开websocket连接或服务端断开连接前，不需要客户端和服务端重新发起连接请求。一旦websocket建立连接之后，后续的数据都是以帧序列的形式传输。

此websocket demo的后台使用的是Java写的，如下：

import java.util.concurrent.CopyOnWriteArraySet;

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;

@ServerEndpoint("/myecho")
public class WSDemo {

//    Logger log = Logger.getLogger(getClass());

//当前在线人数
private static int onlineCount = 0;
//用一个set集合保存几个websocket实例
private static CopyOnWriteArraySet<WSDemo> wsSet = new CopyOnWriteArraySet<WSDemo>();
//websocket的session
private Session session;

/**
* 客户端新建websocket时会触发(握手协议后)
* 并加入当前的set集合中
* @param session
*/
@OnOpen
public void wsOpen(Session session) {
this.session = session;
wsSet.add(this);//加入集合
// 在线人数加1
addOnlineCount();
}

//当websocket退出的时候触发，并在set集合中删除当前websocket
@OnClose
public void wsClose(){
wsSet.remove(this); //删除
//在线人数-1
subOnlineCount();
}

/**
* 接收到客户端发来的消息并处理，同时也像客户端发送消息
* @param message
* @param session
*/
@OnMessage
public void wsMessage(String message, Session session) {
sendMessage(message);
System.out.println("=====客户端发来消息:" + message);
System.out.println("======websocket 数量:" + wsSet.size());
//群发消息
for(WSDemo wss: wsSet) {
wss.sendMessage("服务端发来的消息"); //向客户端发送消息
}
}

//websocket错误的时候丢出一个异常
@OnError
public void wsError(Session session, Throwable throwable) {
throw new IllegalArgumentException(throwable);
}

//send message  发送消息处理方法
public void sendMessage(String message) {
try {
this.session.getBasicRemote().sendText(message);
System.out.println("===============发送了消息:" + message);
} catch (Exception e) {
// TODO: handle exception
System.out.println(e.getMessage());
}
}

// get onlinecount
public static synchronized int getOnlineCount() {
return onlineCount;
}

// +1
public static synchronized void addOnlineCount() {
WSDemo.onlineCount++;
System.out.println("++++++++++++++上线人数+1:" + onlineCount);
}

//-1
public static synchronized void subOnlineCount() {
WSDemo.onlineCount--;
System.out.println("---------------线上人数-1:" + onlineCount);
}

}

前端代码就相对简单，直接使用我们注册的'/myecho' websocket服务端

var wsuri = "ws://localhost:8080/wsdemo/myecho";
var ws = null;

function dows() {
//判断浏览器是否支持websocket
if("WebSocket" in window || window.WebSocket) {
ws = new WebSocket(wsuri);
} else {
alert("browser not support websocket...");
//        throw "browser not support websocket..."; //这种写法是可以的
throw new Error("browser not support websocket...");//这种也是可以
return false
}
ws.onopen = function(evt) {
wsObj.wsopen(evt);
}
ws.onmessage = function(evt) {
wsObj.wsmsg(evt);
}
ws.onclose = function(evt) {
wsObj.wsclose(evt);
}
ws.onerror = function(evt) {
wsObj.wserror(evt);
}
/*ws.send("my message...");*/
}

var wsObj = {
wsopen:function(evt) {
console.log(evt.type);
document.querySelector("#clientSuc").innerHTML = "websocket connect success...";
},
wsmsg:function(msg) {
debugger;
console.log("type:"+msg.type);
//document.getElementById("msg").innerHTML = msg.data;
console.log("data:" + msg.data);
document.querySelector("#msg").innerHTML = msg.data;
//        ws.close(); //关闭websocket
},
wsclose:function(evt) {
console.log("type:" + evt.type);
},
wserror:function(evt) {
console.log("type:" + evt.type);
}
};
function sendMsg (){
var msg = "hello websocket...";
ws.send(msg);
}
function closeWebsocket() {
ws.close();
}

window.addEventListener("load", dows, false);

这里需要注意到的是：因为websocket是j2ee 7 以上的版本所以需要jdk版本1.7以上，而且tomcat服务器的支持也有区别，比如tomcat7不会自动把'websocket-api.jar'引入，而tomcat8则会。如果使用tomcat7的版本且没有自己手动添加tomcat的library引入'websocket-api.jar'这个jar包的话前台会报404找不到websocket服务的异常。这个bug我搞了半天才知道原来是tomcat版本的问题。