Springboot+Vue實現多人聊天室

最近在學習Springboot后端框架，實習的時候有用過Vue.js框架來寫過一些前端頁面，今天嘗試着利用SpringBoot和Vue.js來實現聊天室功能，加深一下理解。

先展示一下做好的效果：

 

 SpringBoot后端代碼：

1、新建一個SpringBoot工程

2、首先要注入ServerEndpointExporter，這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint。要注意，如果使用獨立的servlet容器，而不是直接使用springboot的內置容器，就不要注入ServerEndpointExporter，因為它將由容器自己提供和管理。這里使用Java注解配置方式,自動配置，配置類代碼如下：

package com.example.demospring.config;

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

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

3、新建一個websocket的具體實現類，代碼如下：

package com.example.demospring.controller.WebScoketController;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@RestController
@ServerEndpoint(value="/Room/{username}") // 當創建好一個（服務）端點之后，將它以一個指定的URI發布到應用當中，這樣遠程客戶端就能連接上它了
public class WsBytomcate {
    private static List<Session> sessions = new ArrayList<Session>();
    @OnOpen
    public void OnOpen(Session session, @PathParam(value = "username") String username) {
        sessions.add(session);
        sendTextMsg("好友 [" + username + "]加入群聊");
    }
    @OnMessage
    public void OnMsg(String msg,@PathParam(value = "username") String username) {
        sendTextMsg(username + ":" +msg);
    }
    @OnClose
    public void OnClose(Session session, @PathParam("username") String username) throws IOException {
        sessions.remove(session);
        sendTextMsg("好友 ["+ username + "] 退出群聊");
    }
    @OnError
    public void OnError(Throwable e) {
        e.printStackTrace();
    }
    private void sendTextMsg(String msg) {
        for (Session session : sessions) {
            session.getAsyncRemote().sendText(msg);
        }
    }
}

Vue.js前端代碼：

1、新建vue-cli工程

2、前端頁面代碼：

<template>
    <div class="roomStyle">
    <br>歡迎使用<strong>VueTest</strong>極簡聊天室：<br/><br/>
    <textarea id="content" v-model="content" cols="60" rows="30" readonly="readonly"></textarea><br>
    <input type="text" v-model="message">
    <button type="button" @click="sendMsg()">發送消息</button>
    <br/><br/>
    用戶：<input type="text" v-model="user">
    <button @click="joinRoom()">加入群聊</button>
    <button @click="exitRoom()">退出群聊</button>
</div>
</template>
<script>
export default {
  name: 'pageRoom',
  data() {
    return {
      url: 'ws://'+ window.location.host + '/Room/',
      ws: null,
      user: '',
      message: '',
      content: '',
    }
  },
  created(){
  },
  methods: {
    async joinRoom(){
      if(this.ws) {
        alert("你已經再聊天室");
        return;
      }
      let url = this.url;
      let username = this.user;
      this.ws = new WebSocket('ws://127.0.0.1:8080/Room/' + username);  // 后端的啟動端口
      this.ws.onopen = this.webscoketonopen;
      this.ws.onmessage =  this.webscoketonmessage;
      //發生錯誤觸發
      this.ws.onerror = function () {
        console.log("連接錯誤")
      };
      //正常關閉觸發
      this.ws.onclose = function () {
        console.log("連接關閉");
      };
    }, 
    webscoketonopen(){
      console.log("與服務器成功建立連接");
    },
    webscoketonmessage(value){
      console.log(value);
      this.content += (value.data + '\r\n') ;
    },
    exitRoom(){
      this.closeWebSocket();
    },
    sendMsg(){
      if(!this.ws) {
        alert('你已經掉線，請重新加入');
        return;
      }
      if(this.ws.readyState === 1){
        this.ws.send(this.message);
        this.message = '';
      } else {
        alert('發送失敗');
      }
    },
    closeWebSocket(){
      if(this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    talking(content) {
      console.log(content);
    }
  }
}
</script>
<style>
.roomStyle{
  text-align: center;
  background-color: rgba(15, 161, 230, 0.35);
  margin: 0 auto;
  border: 1px solid #000;
  width: 600px;
  height: 650px
}
</style>

前端源碼下載： https://github.com/xxyxt/vueDemo.git

后端源碼下載：https://github.com/xxyxt/springdemo.git

參考：https://www.cnblogs.com/chenbenbuyi/p/10779999.html