springboot+vue實現websocket

引入依賴

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
      <version>1.3.5.RELEASE</version>
</dependency>

配置ServerEndpointExporter

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint。

創建websocket的ServerEndpoint端點

@Component
@ServerEndpoint("/socket")
public class WebSocketServer {
    /**
     * 全部在線會話 
     */
    private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();


    /**
     * 當客戶端打開連接：1.添加會話對象 2.更新在線人數
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineSessions.put(session.getId(), session);
        
    }

    /**
     * 當客戶端發送消息：1.獲取它的用戶名和消息 2.發送消息給所有人
     * <p>
     * PS: 這里約定傳遞的消息為JSON字符串 方便傳遞更多參數！
     */
    @OnMessage
    public void onMessage(Session session, String jsonStr) {
        
    }

    /**
     * 當關閉連接：1.移除會話對象 2.更新在線人數
     */
    @OnClose
    public void onClose(Session session) {
        onlineSessions.remove(session.getId());
       
    }

    /**
     * 當通信發生異常：打印錯誤日志
     */
    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    /**
     * 公共方法：發送信息給所有人
     */
    public void sendMessageToAll(String jsonMsg) {
        onlineSessions.forEach((id, session) -> {
            try {
                session.getBasicRemote().sendText(jsonMsg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

}

前端配置連接與接收消息

<script>
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 默認主題

Vue.use(ElementUI, {size: 'small'});

import '@/directives/directives.js'
import Locale from '@/mixins/locale';
import { t } from '@/locale';


    /**
     * WebSocket客戶端
     *
     * 使用說明：
     * 1、WebSocket客戶端通過回調函數來接收服務端消息。例如：webSocket.onmessage
     * 2、WebSocket客戶端通過send方法來發送消息給服務端。例如：webSocket.send();
     */
    function getWebSocket() {
        /**
         * WebSocket客戶端 PS：URL開頭表示WebSocket協議 中間是域名端口 結尾是服務端映射地址
         */
        var webSocket = new WebSocket('ws://10.10.10.3:9117/socket');//建立與服務端的連接
        /**
         * 當服務端打開連接
         */
        webSocket.onopen = function (event) {
            console.log('WebSocket打開連接');
        };

        /**
         * 當服務端發來消息：1.廣播消息 2.更新在線人數
         */
        webSocket.onmessage = function (event) {
            console.log(event)
            console.log('WebSocket收到消息：%c' + event.data, 'color:green');
            //獲取服務端消息
            var message = JSON.parse(event.data) || {};
            console.log(message)//
        };

        /**
         * 關閉連接
         */
        webSocket.onclose = function (event) {
            console.log('WebSocket關閉連接');
        };

        /**
         * 通信失敗
         */
        webSocket.onerror = function (event) {
            console.log('WebSocket發生異常');

        };
        return webSocket;
    }

    var webSocket = getWebSocket();


    /**
     * 通過WebSocket對象發送消息給服務端
     * 此處沒有主動發消息給服務端，如果調用此方法，則會發送消息至socket服務端onMessage()方法上
     */
    function sendMsgToServer() {
        var $message = $('#msg');
        if ($message.val()) {
            webSocket.send(JSON.stringify({username: $('#username').text(), msg: $message.val()}));
            $message.val(null);
        }

    }
export default {
 
}

實現后端推送消息至瀏覽器端

    @Autowired
    private WebSocketServer webSocketServer;//注入socket服務
    
    @Override
    public PuStatesResult queryPuStateUseInfo(QueryCondition condition) {
        String sql = condition.generatorSql();
        if(sql == null){
            return null;
        }
        List<PuState> puStateList = null;
        puStateList = puStateMapper.getPusBySql(sql);
        if(puStateList == null || puStateList.size() == 0){
            return null;
        }
        PuStatesResult result = new PuStatesResult();
        result.setPuStateList(puStateList);
        result.computePuStates();
        if(false == condition.isWithDetail()){
            result.setPuStateList(null);
        }
        //todo
        Gson gson = new Gson();
        String json = gson.toJson(result);
        webSocketServer.sendMessageToAll(json);//調用第3節中的方法
        return result;
    }

此處是前端查詢時，服務器將一些數據發送至前端，假如我們在實現有些前端數據顯示的時候，當查詢一次后，如果沒有斷開連接，希望后端數據更新后，前端能接收最近數據。那么可以在數據更新接口中，調用自己實現的socket服務端邏輯，推送消息至服務端，然后由服務端監聽，並更新數據