使用WebSocket實現一個簡單的頁面聊天

上一篇對WebSocket進行了介紹，此次使用WebSocket來實現一個簡單的頁面聊天的功能。

準備

須要注意：
tomcat6是不支持WebSocket的，從tomcat7纔開始支持。
普通的JaveEE、JSPServlet項目也是不支持WebSocket的，須要拷貝額外的jar包

相關依賴

這裏使用開發工具建立SpringBoot項目時能夠直接將依賴加入至項目中

前段須要用到的JS

代碼

後臺Configuration

在這裏對WebSocket進行基本的配置

@Configuration
@EnableWebSocketMessageBroker //開啓信息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /** * 配置鏈接點信息 * @param registry */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        //鏈接點，這裏的withSockJS() 是前段庫
        registry.addEndpoint("/ws/ep").withSockJS();    
    }

    /** * 配置消息隊列(代理) * @param registry */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //啓動代理，這裏能夠配置多個，/queue 表明的是點對點的消息
        registry.enableSimpleBroker("/queue");  
    }
}
複製代碼

後臺Controller

@Controller //注意這裏使用的是Controller註解，而不是RestController
public class WsController {
    //只要引入了WebSocket依賴，就會自動註冊這個Bean
    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;   

    /** * 這個方法用來接收客戶端發來送來的消息，參數是消息自己 * 通訊協議能夠自定義，即參數的格式能夠自定義 * 能夠接受JSON參數，且不須要添加註解 * @param msg * @param principal 保存了用戶信息 */
    @MessageMapping("/ws/chat") //消息映射
    public void receiveMessage(String msg,Principal principal){
        //從前段發送過來的字符串經過 ; 號拆分出最後一節字符串（須要接受信息的客戶端）
        String[] split = msg.split(";");
        Map<String,Object>map = new HashMap<>();
        map.put("msg",split[0]);
        map.put("username",split[split.length-1]);
        // split[split.length-1] 接受信息的客戶端
        // "/queue/msg" 隊列
        simpMessagingTemplate.convertAndSendToUser(split[split.length-1],"/queue/msg",map);
    }
}
複製代碼

前段

這裏就不對前段進行相關的介紹了，大體描述下

<template>
  <div>
    <div style="margin-top: 20px">
      <div v-for = "(m,index) in ms" :key="index">{{m.username}}:{{m.msg}}</div>
    </div>
    <el-input v-model="msg"></el-input>
    <!-- 經過點擊觸發sendMsg() 方法來向後臺發送數據 -->
    <el-button @click = "sendMsg">發送</el-button>
  </div>
</template>

<script> //獲取JS import '../../lib/sockjs' import '../../lib/stomp' export default { name: "FriendChat", data(){ return { msg:'', ms:[], stomp:null } }, mounted(){ //頁面渲染的時候就經過initCon() 方法獲取到鏈接 this.initCon(); }, methods:{ initCon(){ let _this=this; this.stomp = Stomp.over(new SockJS('/ws/ep')); this.stomp.connect({},success => { _this.stomp.subscribe("/user/queue/msg",msg =>{ _this.ms.push(JSON.parse(msg.body)); }) },fail =>{ }) }, sendMsg(){ this.stomp.send("/ws/chat",{ },this.msg) } } } </script>

<style scoped> </style>
複製代碼

效果

這裏經過兩個不一樣的用戶來發送信息測試

經過控制檯確保協議已升級且得到鏈接

輸入字符串，經過分號將接受者的信息分開

另外一邊則收到了發送過來的信息