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

寒翼綿羊發表於2019-04-28

Web

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

準備

需要注意：
tomcat6是不支援WebSocket的，從tomcat7才開始支援。
普通的JaveEE、JSPServlet專案也是不支援WebSocket的，需要拷貝額外的jar包

前段需要用到的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>
複製程式碼