springboot +WebSocket。实现前后端交互通讯

springboot + websocket + spring-messaging实现服务器向浏览器广播式

前端：

    var ws;  //建立websocket连接
    var tt; //监听心跳时间
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        var wsUrl =location.protocol+location.host+"/jnetcms/myHandler";
        if (wsUrl.indexOf("https") >= 0 ) {//如果是https  webSocket 需要遵守wss协议所以这里判断如果是https socket
            wsUrl = wsUrl.replace("https","wss");
        }else{
            wsUrl = wsUrl.replace("http","ws");
        }
        //创建链接
        createWebSocket();
        //创建链接
        function createWebSocket() {
            try {
                ws = new WebSocket(wsUrl);
                // 初始化链接
                init();
            } catch(e) {
                console.log('catch'+e);
                reconnect(wsUrl);
            }
        }
        //初始化链接Socket
        function init() {
            ws.onclose = function () {
//                console.log(" Socket已关闭");
                reconnect(wsUrl);
            };
            ws.onerror = function() {
//                console.log(' 发生异常了');
                reconnect(wsUrl);
            };
            ws.onopen = function () {
//                console.log(" Socket 已打开");
                //心跳检测重置
                heartCheck.start();
            };
            ws.onmessage = function (evn) {
                console.log(evn);
                //拿到任何消息都说明当前连接是正常的
                var txt=evn.data;
                var data = JSON.parse(txt);
                if(data.type==1){//刷新表格
                    debugger;
                    tips(data.msg,"success");
                    if(top.document.getElementById('list').contentWindow.document.getElementById("dataTable"))
                        top.document.getElementById('list').contentWindow.reloadTable();
                }else if(data.type==2){//右下角提示
                    tips(data.msg,"error");
                    //增加页面站内消息数，同时应发送站内消息给用户
                    var noteNum=parseInt($("#note").text());
                    $("#note").text(noteNum+1);
                }
                //调用心跳检测
                heartCheck.start();
            }
        }
        var lockReconnect = false;//避免重复连接
        //重试连接socket
        function reconnect(wsUrl) {
            if(lockReconnect) {
                return;
            };
            lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            tt && clearTimeout(tt);
            tt = setTimeout(function () {
                createWebSocket(wsUrl);
                lockReconnect = false;
            }, 180000);
        }
        //心跳检测
        var heartCheck = {
            timeout: 210000,
            timeoutObj: null,
            serverTimeoutObj: null,
            start: function(){
                var self = this;
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                this.timeoutObj = setTimeout(function(){
                    //这里发送一个心跳，后端收到后，返回一个心跳消息
                    self.serverTimeoutObj = setTimeout(function() {
                        ws.close();
                    }, self.timeout);
                }, this.timeout)
            }
        }
    }

后台：

Pom文件 添加：

 <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>4.3.7.RELEASE</version>
 </dependency>
  <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>4.3.7.RELEASE</version>
  </dependency>

新建：MyHandler.java

import org.springframework.stereotype.Service;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
/*实现Websocket建立连接、发送消息、断开连接等时候的处理类。*/
@Service
public class MyHandler extends TextWebSocketHandler {
    //在线用户列表
    private static final Map<String, WebSocketSession> users;
    //用户标识
    private static final String CLIENT_ID = "username";

    static {
        users = new HashMap<String, WebSocketSession>();
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        //System.out.println("成功建立socket连接");
        String username= getClientId(session);
        //System.out.println(username);
        if (username != null) {
            users.put(username, session);
            //连接后返回消息
            //session.sendMessage(new TextMessage("成功建立socket连接"));

        }
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // ...
        //System.out.println(message.getPayload());

        WebSocketMessage<String> message1 = new TextMessage("server:"+message);
        try {
            session.sendMessage(message1);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 发送信息给指定用户
     * @param clientId
     * @param message {"type":"1","msg":"内容"}
     * @return
     */
    public boolean sendMessageToUser(String clientId, TextMessage message) {
        if (users.get(clientId) == null) {
              return false;
        }
        WebSocketSession session = users.get(clientId);
        //System.out.println("sendMessage:" + session);
        if (!session.isOpen()) {
            return false;
        }
        try {
            session.sendMessage(message);
        } catch (IOException e) {
            //System.out.println(e);
            return false;
        }
        return true;
    }

    /**
     * 广播信息
     * @param message
     * @return
     */
    public boolean sendMessageToAllUsers(TextMessage message) {
        boolean allSendSuccess = true;
        Set<String> clientIds = users.keySet();
        WebSocketSession session = null;
        for (String clientId : clientIds) {
            try {
                session = users.get(clientId);
                if (session.isOpen()) {
                    session.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
                allSendSuccess = false;
            }
        }

        return  allSendSuccess;
    }


    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if (session.isOpen()) {
            session.close();
        }
        //System.out.println("连接出错");
        users.remove(getClientId(session));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        //System.out.println("连接已关闭：" + status);
        users.remove(getClientId(session));
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }

    /**
     * 获取用户标识
     * @param session
     * @return
     */
    private String getClientId(WebSocketSession session) {
        try {
            return (String) session.getAttributes().get(CLIENT_ID);
        } catch (Exception e) {
            return null;
        }
    }
}

新建 ：WebSocketConfig.java

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/*创建一个WebSocket配置类（也可以用配置文件来实现其实），实现接口来配置Websocket请求的路径和拦截器*/
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler").addInterceptors(new WebSocketInterceptor()).setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }

}

新建 WebSocketInterceptor.java

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import javax.servlet.http.HttpSession;
import java.util.Map;
/*创建拦截器，用来记录用户标识，便于后面向特定用户发送消息*/
@Component
public class WebSocketInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler, Map<String, Object> map) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;
            HttpSession session = serverHttpRequest.getServletRequest().getSession();
            if (session != null) {
                map.put("username", session.getAttribute("username"));
            }

        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {

    }
}

发送消息 :SocketController.java

import com.alibaba.druid.support.json.JSONUtils;
import com.zkjw.cms.websocket.MyHandler;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.socket.TextMessage;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
import java.util.logging.ConsoleHandler;
import java.util.logging.Handler;


@Controller
@RequestMapping("/message")
public class SocketController{


    MyHandler handler=new MyHandler();
    //private MyHandler handler=new MyHandler();
    /**
     * 发送信息给指定用户
     * @param username
     * @param message {"type","1","msg":"内容"}
     * @return
     */
    @RequestMapping(value = "/toUser",method = RequestMethod.POST)
    public @ResponseBody void toUser(HttpServletRequest request) {

        String username= request.getParameter("username");
        String msg=request.getParameter("message");
        //System.out.println(msg);


        boolean flag = handler.sendMessageToUser(username,new TextMessage(msg));
        //System.out.println(flag);
       if(flag){
           //System.out.println("发送成功");
       }
    }

    @RequestMapping("/toAll")
    public @ResponseBody void sendMessage() {
        boolean flag = handler.sendMessageToAllUsers(new TextMessage("你好"));
        if(flag){
            System.out.println("批量发送成功");
        }

    }

    @RequestMapping(value="/test3",method=RequestMethod.POST)
    public void test3(@RequestBody Map<String, String> map) {
        String username = map.get("username");
        //将json对象转化为json字符串
        String jsonString = JSONUtils.toJSONString(map);
        boolean flag =handler.sendMessageToUser(username,new TextMessage(jsonString));

    }

    public void test() {

        Map<String, String> map = new HashMap<String, String>();
        map.put("type","2");
        map.put("msg","发送成功");
        String jsonString = JSONUtils.toJSONString(map);
        String username = "admin";
        MyHandler handler = new MyHandler();
        handler.sendMessageToUser(username,new TextMessage(jsonString));
    }

}