SpringBoot+WebSocket怎么實現(xiàn)在線聊天

本篇內(nèi)容主要講解“SpringBoot+WebSocket怎么實現(xiàn)在線聊天”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“SpringBoot+WebSocket怎么實現(xiàn)在線聊天”吧!

在線聊天使用了SpringBoot+WebSocket實現(xiàn)，為了保證用戶隱私，所有的聊天數(shù)據(jù)都保存在系統(tǒng)本地，服務器只進行了數(shù)據(jù)轉(zhuǎn)發(fā)。OK，那接下來，我們來看下大致的實現(xiàn)步驟。

服務端

服務端首先加入websocket依賴，如下：

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

創(chuàng)建WebSocket的配置類，如下：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/ws/endpointChat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/queue","/topic");
    }
}

這里我并未使用原生的websocket協(xié)議，而是使用了websocket的子協(xié)議stomp，方便一些。消息代理既使用了/queue,又使用了/topic，主要是因為我這里既有點對點的單聊(queue)，也有發(fā)送系統(tǒng)消息的群聊(topic)。

創(chuàng)建websocket處理類Controller，如下：

@Controller
public class WsController {
    @Autowired
    SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/ws/chat")
    public void handleChat(Principal principal, String msg) {
        String destUser = msg.substring(msg.lastIndexOf(";") + 1, msg.length());
        String message = msg.substring(0, msg.lastIndexOf(";"));
        messagingTemplate.convertAndSendToUser(destUser, "/queue/chat", new ChatResp(message, principal.getName()));
    }
}

消息協(xié)議很簡單：發(fā)送來的消息，最后一個;后面跟的是該條消息要發(fā)送到哪個用戶，這里通過字符串截取將之提取出來。響應消息包含兩個字段，一個是消息內(nèi)容，一個是該條消息由誰發(fā)送。

OK，如此之后，我們的服務端就寫好了，很簡單。

前端

前端代碼稍微復雜，我這里主要和小伙伴介紹下我的大致思路和核心代碼，具體代碼小伙伴可以star源碼進行研究。

首先，當用戶登錄成功之后，我就發(fā)起websocket的連接，將ws連接起來，ws的代碼我主要寫在了store中，如下：

connect(context){
    context.state.stomp = Stomp.over(new SockJS("/ws/endpointChat"));
    context.state.stomp.connect({}, frame=> {
    context.state.stomp.subscribe("/user/queue/chat", message=> {
        var msg = JSON.parse(message.body);
        var oldMsg = window.localStorage.getItem(context.state.user.username + "#" + msg.from);
        if (oldMsg == null) {
        oldMsg = [];
        oldMsg.push(msg);
        window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsg))
        } else {
        var oldMsgJson = JSON.parse(oldMsg);
        oldMsgJson.push(msg);
        window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsgJson))
        }
        if (msg.from != context.state.currentFriend.username) {
        context.commit("addValue2DotMap", "isDot#" + context.state.user.username + "#" + msg.from);
        }
        //更新msgList
        var oldMsg2 = window.localStorage.getItem(context.state.user.username + "#" + context.state.currentFriend.username);
        if (oldMsg2 == null) {
        context.commit('updateMsgList', []);
        } else {
        context.commit('updateMsgList', JSON.parse(oldMsg2));
        }
    });
    }, failedMsg=> {

    });
}

連接成功之后，就可以準備接收服務端的消息了，接收到服務端的消息后，數(shù)據(jù)保存在localStorage中，保存格式是 當前用戶名#消息發(fā)送方用戶名:[{from:'消息發(fā)送方',msg:'消息內(nèi)容'}]，注意后面的是一個json數(shù)組，整個存儲的key之所以用當前用戶名#消息發(fā)送方用戶名是為了避免同一個瀏覽器多個用戶登錄所產(chǎn)生的數(shù)據(jù)紊亂，OK，這樣兩個人的聊天記錄都將保存在這個數(shù)組中。在聊天展示頁面，當數(shù)組中的數(shù)據(jù)發(fā)生變化時，自動更新。

在聊天頁面，通過stomp發(fā)送消息，如下：

this.$store.state.stomp.send("/ws/chat", {}, this.msg + ";" + this.currentFriend.username);

注意每條消息的內(nèi)容除了內(nèi)容本身外，還要加上當前發(fā)送者的名字。
每次發(fā)送成功后更新聊天頁面即可。更新聊天頁面代碼如下：

<template v-for="msg in msgList">
<!--發(fā)送來的消息-->
<div
    
    v-if="msg.from==currentFriend.username">
    <img :src="currentFriend.userface" class="userfaceImg">
    <div
    >
    {{msg.msg}}
    </div>
</div>
<!--發(fā)出去的消息-->
<div v-if="msg.from!=currentFriend.username"
        >
    <div
    >
    {{msg.msg}}
    </div>
    <img :src="currentUser.userface" class="userfaceImg">
</div>
</template>

如果消息中的from字段的值，就是當前聊天的用戶名，則是發(fā)送來的消息，否則就是發(fā)出去的消息，不同的消息設置不同的樣式即可。

到此，相信大家對“SpringBoot+WebSocket怎么實現(xiàn)在線聊天”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！