WebSocket浅析

一、WebSocket服务端创建

1.创建WebSocket服务端方式（注解）

//通过该注解来创建WebSocket服务端，括号里面是服务端路径
@ServerEndpoint("/websocket/{userID}")
public class WebSocketServer {
    
}

    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(@PathParam("userID")Long userID, Session session){
        System.out.println("webSocket客户端建立了连接！");
    }
    

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
       System.out.println("webSocket客户端关闭了连接");
    }
    
    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public static void onMessage(String message){
        System.out.println("从客户断接受到的消息："+message);
    }
    
    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("连接出错，错误类型是："+error);
    }

注意：创建webSocket的服务端最好用tomcat8以上的服务器，如果用低版本的tomcat服务器，可能又造成冲突

2.创建WebSocket客户端(前端)

    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
       websocket = new WebSocket("ws://localhost:8080/websocket/1")
    }
    else{//ws://localhost:8080/websocket
        alert('Not support websocket');
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
        //alert("收到传递的信息！");
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

3、WebSocket服务端线程安全问题

• WebSocket服务端@onMessage注解的方法，如果有多个线程同时连接了服务端，向服务端传输数据，可能会造成线程的安全问题，报错

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public static void onMessage(String message){
    session.getBasicRemote().sendText("用户ID:"+id+"已经接受到消息，并且向客户端返回消息，返回的消息："+message);
        System.out.println("从客户断接受到的消息："+message);
    }

• 上图中的方法是线程不安全的，笔者通过Jmeter测试工具来进行多线程压力测试，果然出现了数据写入出错的问题

Jmeter测试实例 后台传输数据报错

• 报错信息是由于多线程同时向socket里面写入数据时报错，增加@OnMessage注解方法，增加synchronized关键字使方法变得线程安全

 @OnMessage
    public synchronized static void onMessage(String message){
    session.getBasicRemote().sendText("用户ID:"+id+"已经接受到消息，并且向客户端返回消息，返回的消息："+message);
        System.out.println("从客户断接受到的消息："+message);
    }

4.webSocket断线重连机制

var lockReconnect = false;//避免重复连接
    var wsUrl = "ws://localhost:8081/websocket/1";
    var ws =null;
    var time;

    function createWebSocket() {
        try {
            ws = new WebSocket(wsUrl);
            init();
        } catch (e) {
            console.log("e");
            reconnect(wsUrl)
        }
    }

    function init() {
        //连接发生错误的回调方法
        ws.onerror = function () {
            setMessageInnerHTML("error");
            reconnect(wsUrl);
        };

        //连接成功建立的回调方法
        ws.onopen = function (event) {
            setMessageInnerHTML("open");
            heartCheck.start();
        }

        //接收到消息的回调方法
        ws.onmessage = function (event) {
            setMessageInnerHTML(event.data);
            //alert("收到传递的信息！");
             heartCheck.start();
        }

        //连接关闭的回调方法
        ws.onclose = function () {
            setMessageInnerHTML("close");
            reconnect(wsUrl);
        }

    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        ws.close();
    }

    function reconnect(url) {
        if (lockReconnect) {
            return;
        }
        ;

        lockReconnect == true;
        //没连接上会一直重连，设置延迟避免请求过多
        time && clearTimeout(time)
        time = setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
        }, 4000)
    }

    //心跳检测
    var heartCheck = {
        timeOut: 3000,
        timeOutObj: null,
        serverTimeOutObj: null,

        start: function () {
            var self = this;
            //将关闭客户端的延迟方法取消
            self.serverTimeOutObj && clearTimeout(self.serverTimeOutObj);
            self.timeOutObj = setTimeout(function () {
                //这里发送一个心跳消息，后端收到心跳消息后返回一个心跳消息，采用延迟2秒发送避免造成服务端消息堵塞
                ws.send("12345678");
                //创建延迟方法，如果2秒钟后台没有响应消息，客户端就会关闭连接，触发websocket重连
                self.serverTimeOutObj = setTimeout(function() {
                    ws.close();
                    // createWebSocket();
                }, 2000);

            },2000)
        }
    }

    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //页面初始化时创建连接
    createWebSocket(wsUrl);

• 断线重连效果

  
  image

• 上图显示了客户端创建了WebSocket的连接之后，向后台定时发送心跳，然后手动关掉服务，前台页面显示重连，在服务重启的过程中前台重连报错，后台服务启动成功之后前端重新创建WebSocket成功，同时继续发送心跳服务