Spring Boot 整合Websocket

使用场景:后台进入一个页面,然后页面中有个按钮需要第三方授权,授权成功后刷新这个页面

话不多说..直接上代码

1.框架使用的是Spring Boot的,所以引用webSocket对应的jar

<!--websocket服务端-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.后端socket代码

2.1:先创建个WebSocketConfig类

package com.sg.pay.common.config.webSocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * Created by huang(jy) on 2018/10/27.
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

2.2:创建websocket核心代码

(其中我通过传递userId作为一个代表每个页面的key值,用于第三方授权成功后通过userId通知到具体的session进行刷新页面,这个地方大家可以考虑有什么办法如何刷新具体的页面)

package com.sg.pay.common.config.webSocket;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
/**
 * Created by huang(jy) on 2018/10/27.
 */
@ServerEndpoint(value = "/websocket/{userId}")
@Component
public class MyWebSocket {

    private static final Logger LOGGER = LoggerFactory.getLogger(MyWebSocket.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

    public static Map<String, Session> sessionMap = new ConcurrentHashMap<>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session
                        , @PathParam("userId") String userId) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
        try {
            LOGGER.info("addUserId:" + userId);
           //用于缓存每个具体的页面
            sessionMap.put(userId, this.session);
            sendMessage("add");
        } catch (Exception e) {
            System.out.println("IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        sessionMap.remove(this.session.getId());
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);

        //群发消息
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生错误时调用
     * */
     @OnError
     public void onError(Session session, Throwable error) {
     System.out.println("发生错误");
     error.printStackTrace();
     }


     public void sendMessage(String message) throws IOException {
         //群发消息
         for (MyWebSocket item : webSocketSet) {
             try {
                 item.session.getBasicRemote().sendText(message);
             } catch (IOException e) {
                 e.printStackTrace();
             }
         }
     }

    public void sendMessage(String userId, String message) throws IOException {
        LOGGER.info("sendUserId:" + userId);
       //获取到具体的session后发送信息到对应页面
        sessionMap.get(userId).getBasicRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
    }

     /**
      * 群发自定义消息
      * */
    public static void sendInfo(String message) throws IOException {
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

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

    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }
}

//第三方成功授权后,调用socket通知页面

3.前端代码

<script src="http://pay.dev.xmsvn.com/js/jquery.min.js?v=2.1.4" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    var websocket = null;
    console.log(userId);
    console.log(serverIpPort);
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
        websocket = new WebSocket("ws://"+ serverIpPort + "/websocket/" + userId);
    } else {
        alert('当前浏览器 Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    };
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
        console.log(event.data);
        if(event.data !="add"){
//            if(event.data =="SUCCESS"){
//                layer.msg("授权成功",{time:2000});
//            }else {
//                layer.msg("授权失败",{time:2000});
//            }
            layer.msg("操作成功",{time:2000});
            self.setInterval(function(){  // 这个方法是说在延迟两秒后执行大括号里的方法
                location.reload();   // 这个方法是刷新当前页面
            },2000) //这里2000代表两秒
        }
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    };
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
//        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    };
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    };

</script>

(注意:部署到Linux上时对应的端口需要开放websock协议)

如有转载请请务必保留此出处：https://blog.csdn.net/hometing218/article/details/84140580

Spring Boot 整合Websocket

猜你喜欢