SpringBoot+Vue搭建一個WebSocket的實時聊天室-有解無憂

首先搭建一個SpringBoot專案，其中各個檔案：

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>love.xiaohh</groupId>
    <artifactId>websocket-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>websocket-demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

love.xiaohh.websocket.WebsocketApplication，其中注冊一個bean，使WebSocket的Endpoint生效

package love.xiaohh.websocket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@EnableWebSocket // 開啟websocket的注解，告訴Spring我們要使用WebSocket
@SpringBootApplication
public class WebsocketApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebsocketApplication.class, args);
    }

    /**
     * 注冊一個 ServerEndpointExporter，這樣可以讓注冊到容器當中的WebSocket的Endpoint生效
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

love.xiaohh.websocket.controllers.ws.WebSocketController，這是主角，也是websocket的控制器，有點像Controller

package love.xiaohh.websocket.controllers.ws;

import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.atomic.AtomicLong;

/**
 * <p>
 * WebSocket的控制器
 * </p>
 * @author tanghai
 * @version 1.0
 * @date 2021-09-14 星期二 11:02:09
 */
@Component
@ServerEndpoint("/default/websocket")
public class WebSocketController {

    /**
     * 當前在線的總人數
     */
    private static final AtomicLong ONLINE_COUNT = new AtomicLong(0L);

    /**
     * 所有在線的人數的
     */
    private static final Map<String, Session> ALL_ONLINE_INFO = new HashMap<String, Session>();

    /**
     * websocket被打開的方法
     *
     * @param session 會話
     */
    @OnOpen
    public void open(Session session) {
        // 獲取sessionId，讓后將session存入到Map中
        final String id = session.getId();
        ALL_ONLINE_INFO.put(id, session);
        // 在線人數自加1并發送給所有的客戶端
        final long onlineCount = ONLINE_COUNT.incrementAndGet();
        this.sendMessage(0, onlineCount + "");
    }

    /**
     * websocket被退出
     *
     * @param session 會話
     */
    @OnClose
    public void close(Session session) {
        // 將session從快取當中移除
        final String id = session.getId();
        ALL_ONLINE_INFO.remove(id);
        // 在線人數自減1并發送給所有的客戶端
        final long onlineCount = ONLINE_COUNT.decrementAndGet();
        this.sendMessage(0, onlineCount + "");
    }

    /**
     * 當收到客戶端發送過來的訊息時觸發
     *
     * @param message 客戶端發送過來的訊息
     * @param session 客戶端的session會話
     */
    @OnMessage
    public void message(String message, Session session) throws IOException {
        // 將訊息發送到所有的客戶端
        this.sendMessage(1, message);
    }

    /**
     * 發送訊息給所有用戶
     *
     * @param type    訊息型別；0=更新在線人數,1=發送的訊息
     * @param message 訊息物體
     */
    private void sendMessage(int type, String message) {
        // 拼接成JSON，讓后前端可以決議
        String targetMessage = "{\"type\":" + type + ",\"message\":\"" + message + "\"}";
        // 遍歷并發給所有的客戶端
        ALL_ONLINE_INFO.values().forEach(session -> {
            try {
                session.getBasicRemote().sendText(targetMessage);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
}

后端的代碼大功告成，然后我們搭建一個前端的Vue專案，搭建程序可參見Vue專案的搭建教程，搭建好后需要安裝一個element-ui：

npm i element-ui -S

修改幾個檔案：

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>websocket-demo-ui</title>
    <style type="text/css">
      body,#app {
        margin: 0;
        border: 0;
        padding: 0;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/main.js：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

// 引入并使用elementui
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

src/App.vue：

<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

src/router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import ChatRoom from '@/components/ChatRoom'

Vue.use(Router)

export default new Router({
  routes: [
    {
      // 根路徑默認到聊天室
      path: '/',
      name: 'ChatRoom',
      component: ChatRoom
    }
  ]
})

src/components/ChatRoom.vue：

<template>
  <div id="wrapper">
    <el-row style="height: 10%">
      <el-col :span="12"><h1>小海海的聊天室</h1></el-col>
      <el-col :span="12" style="text-align: right;margin: auto 20px auto 0;">當前在線人數： {{ onlineCount }}</el-col>
    </el-row>
    <el-row style="height: 80%">
      <el-col :span="24">
        <chat-item v-for="(message, index) in chatList" :customerMessage="message" :key="index"/>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <el-input v-model="customerMessage" @keydown.enter="sendMessage" placeholder="訊息內容..."></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="sendMessage" plain>發送</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ChatItem from './ChatItem'

export default {
  name: 'ChatRoom',
  data() {
    return {
      socketInfo: {
        path: 'ws://127.0.0.1:8080/default/websocket',
        socket: null
      },
      onlineCount: 0,
      chatList: [],
      customerMessage: ''
    }
  },

  mounted() {
    // 初始化 WebSocket
    this.init()
  },

  destroyed() {
    this.socketInfo.socket.close();
  },

  methods: {
    /**
     * 初始化WebSocket
     */
    init() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的瀏覽器不支持WebSocket')
      } else {
        const socket = new WebSocket(this.socketInfo.path)

        // 發送訊息的事件
        socket.onmessage = this.getMessage
        // socket被打卡的事件
        socket.onopen = this.socketOpen

        this.socketInfo.socket = socket
      }
    },
    socketOpen() {
      this.chatList.push('您已經進入聊天室，可以開始聊天了！')
    },
    /**
     * 發送訊息給服務端
     */
    sendMessage() {
      if (this.customerMessage === '') alert('發送訊息不能為空')
      this.socketInfo.socket.send(this.customerMessage)
      this.customerMessage = ''
    },
    /**
     * 收到服務器發過來的訊息
     * @param message 訊息物件
     */
    getMessage(message) {
      // 將接收到的訊息轉換為json格式
      const messageJson = JSON.parse(message.data)
      if (messageJson.type === 0) {
        this.onlineCount = messageJson.message
      } else if (messageJson.type === 1) {
        this.chatList.push(messageJson.message)
      }
    }
  },

  components: {
    ChatItem
  }
}
</script>

<style scoped>

</style>

src/components/ChatItem.vue：

<template>
<div>
  <p>{{customerMessage}}</p>
  <hr/>
</div>
</template>

<script>
export default {
  name: 'ChatItem',
  props: {
    customerMessage: String
  }
}
</script>

<style scoped>

</style>

然后我們啟動這兩個程式：

# 打包maven專案
mvn clean package -Dmaven.test.skip

# 在打包好的好的target目錄中啟動Java程式
java -jar websocket-demo-0.0.1-SNAPSHOT.jar

# 在vue專案的根路徑下下載所有依賴：
npm install

然后訪問http://127.0.0.1：

在這里插入圖片描述

多開幾個：

在這里插入圖片描述

嘗試發送訊息發現同步接收：

在這里插入圖片描述

現在你就可以叫上你們的小伙伴們一起聊天了！如果不行那么歡迎來到代碼倉庫克隆代碼運行哦

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/301482.html

標籤：其他

上一篇：OPNFV — Overview

下一篇：五，gRPC微服務(library-book-grpc-service)