spring boot+vue實現H5聊天室客服功能

h5效果圖

vue效果圖

功能實現

• spring boot + webSocket 實現
• 官方地址 https://docs.spring.io/spring-framework/docs/5.0.8.RELEASE/spring-framework-reference/web.html#websocket

maven 配置文件

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-dependencies</artifactId>
        <version>2.2.0.RELEASE</version>
    </parent>
    <groupId>org.example</groupId>
    <artifactId>webChat</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.78</version>
        </dependency>

        <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.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </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>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

webSocket 配置

package com.example.webchat.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;

/**
 * @author Mr.Fang
 * @title: WebSocketConfig
 * @Description: web socket 配置
 * @date 2021/11/14 13:12
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "myHandler/") // 訪問路徑
                .addInterceptors(new WebSocketHandlerInterceptor())  // 配置攔截器
                .setAllowedOrigins("*"); // 跨域
    }
    @Bean
    public ServletServerContainerFactoryBean createWebSocketContainer() {
        ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
        container.setMaxTextMessageBufferSize(8192);  // 例如消息緩沖區大小、空閑超時等
        container.setMaxBinaryMessageBufferSize(8192);
        return container;
    }
    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }

}

消息處理類

package com.example.webchat.config;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.example.webchat.pojo.DataVo;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.AbstractWebSocketHandler;

import java.io.IOException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author Mr.Fang
 * @title: MyHandler
 * @Description: 消息處理類
 * @date 2021/11/14 13:12
 */
public class MyHandler extends AbstractWebSocketHandler {
    private static int onlineCount = 0;
    //    線程安全
    private static Map<String, WebSocketSession> userMap = new ConcurrentHashMap<>(); // 用戶
    private static Map<String, WebSocketSession> adminMap = new ConcurrentHashMap<>(); // 客服

    /**
     * @Description: 連接成功之后
     * @param session
     * @return void
     * @Author Mr.Fang
     * @date 2021/11/14 13:15
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws IOException {
        addOnlineCount(); // 當前用戶加 1
        System.out.println(session.getId());
        Map<String, Object> map = session.getAttributes();
        Object token = map.get("token");
        Object admin = map.get("admin");
        DataVo dataVo = new DataVo();
        dataVo.setCode(9001).setMsg("連接成功");
        if (Objects.nonNull(admin)) {
            adminMap.put(session.getId(), session); // 添加客服
        } else  {
            //        分配客服
            userMap.put(session.getId(), session); // 添加當前用戶
            distribution(dataVo);
        }
        dataVo.setId(session.getId());
        System.out.println("用戶連接成功:" + admin);
        System.out.println("用戶連接成功:" + token);
        System.out.println("在線用戶:" + getOnlineCount());
        this.sendMsg(session, JSONObject.toJSONString(dataVo));
    }

    /**
     * @param vo
     * @return void
     * @Description: 分配客服
     * @Author Mr.Fang
     * @date 2021/11/14 13:13
     */
    private void distribution(DataVo vo) {
        if (adminMap.size() != 0) {
            Random random = new Random();
            int x = random.nextInt(adminMap.size());
            Set<String> values = adminMap.keySet();
            int j = 0;
            for (String str : values) {
                if (j == x) {
                    vo.setRecId(str);
                    System.out.println("分配ID:" + str);
                    break;
                }
                j++;
            }
        }
    }

    /**
     * @param session
     * @param message
     * @return void
     * @Description: 收發消息
     * @Author Mr.Fang
     * @date 2021/11/14 13:13
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

        System.out.print("用戶ID：" + session.getId());
        String payload = message.getPayload();
        System.out.println("接收到的數據:" + payload);
        DataVo dataVo = JSON.toJavaObject(JSON.parseObject(payload), DataVo.class); // json 轉對象

        if (Objects.isNull(dataVo.getRecId()) || dataVo.getRecId().equals("")) { // 用戶客服為空 分配客服
            WebSocketSession socketSession = adminMap.get(session.getId());
            if (Objects.isNull(socketSession)) {
                this.distribution(dataVo);
            }
        }
        if (dataVo.getCode() == 9002) {
            if (Objects.nonNull(dataVo.getRecId())) { // user -> admin
                WebSocketSession socketSession = adminMap.get(dataVo.getRecId());
                dataVo.setSelfId(session.getId()).setRecId("");
                this.sendMsg(socketSession, JSONObject.toJSONString(dataVo));
            } else if (Objects.nonNull(dataVo.getSelfId())) { // admin ->user
                WebSocketSession socketSession = userMap.get(dataVo.getSelfId());
                dataVo.setRecId(session.getId()).setSelfId("");
                this.sendMsg(socketSession, JSONObject.toJSONString(dataVo));
            }
        }
    }

    /**
     * @param session
     * @param msg
     * @return void
     * @Description: 發送消息
     * @Author Mr.Fang
     * @date 2021/11/14 13:14
     */
    private void sendMsg(WebSocketSession session, String msg) throws IOException {
        session.sendMessage(new TextMessage(msg));
    }

    /**
     * @Description: 斷開連接之后
     * @param session
     * @param status
     * @return void
     * @Author Mr.Fang
     * @date 2021/11/14 13:14
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        subOnlineCount(); // 當前用戶加 1
        adminMap.remove(session.getId());
        userMap.remove(session.getId());
        System.out.println("用戶斷開連接token:" + session.getId());
        System.out.println("用戶斷開連接admin:" + session.getId());
        System.out.println("在線用戶:" + getOnlineCount());

    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    /**
     * @Description: 在線用戶 +1
     * @return void
     * @Author Mr.Fang
     * @date 2021/11/14 13:16
     */
    public static synchronized void addOnlineCount() {

        MyHandler.onlineCount++;
    }

    /**
     * @Description: 在線用戶 -1
     * @return void
     * @Author Mr.Fang
     * @date 2021/11/14 13:16
     */
    public static synchronized void subOnlineCount() {
        MyHandler.onlineCount--;
    }
}

配置攔截器

package com.example.webchat.config;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

import javax.servlet.http.HttpServletRequest;
import java.util.Map;
import java.util.Objects;

/**
 * @author Mr.Fang
 * @title: WebSocketHandlerInterceptor
 * @Description: 攔截器
 * @date 2021/11/14 13:12
 */
public class WebSocketHandlerInterceptor extends HttpSessionHandshakeInterceptor {

    /**
     * @param request
     * @param response
     * @param wsHandler
     * @param attributes
     * @return boolean
     * @Description: 握手之前
     * @Author Mr.Fang
     * @date 2021/11/14 13:18
     */
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {

        ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
        HttpServletRequest re = servletRequest.getServletRequest();
        Object token = re.getParameter("token");
        Object admin = re.getParameter("admin");
        if (Objects.isNull(token)) {
            return false;
        }
        re.getSession().setAttribute("admin", admin);
        re.getSession().setAttribute("token", token);
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }

    /**
     * @param request
     * @param response
     * @param wsHandler
     * @param ex
     * @return boolean
     * @Description: 握手之后
     * @Author Mr.Fang
     * @date 2021/11/14 13:18
     */
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }
}

h5服務端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服務端</title>
		<style type="text/css">
			#client {
				margin: 0px auto;
				width: 500px;
			}

			input {
				width: 80%;
				height: 40px;
				border-radius: 5px;
				border-color: #CCCCCC;
				outline: #01FA01;
			}

			#button {
				width: 84px;
				height: 46px;
				background-color: #5af3a5;
				color: #fff;
				font-size: 20px;
				border-radius: 5px;
				border: none;
				box-shadow: 1px 1px 1px 1px #ccc;
				cursor: pointer;
				outline: #01FA01;
			}
		</style>
	</head>
	<body>
		<div id="client">
			<h1 style="text-align: center;">服務端發送消息</h1>
			<div id="content" contenteditable=true
				style="width: 500px;height: 500px;margin: 0px auto;border: 1px solid #000000;padding: 10px;border-radius: 10px;overflow: auto;">

			</div>
			<div style="padding: 5px;0px">
				<input type="" value="" /> <button id="button" type="button">發送</button>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$(() => {
				var pushData = {
					code: 9002,
					msg: '',
					selfId: '',
				};
				var time = null;
				var path = 'ws://127.0.0.1:8009/myHandler/';
				if (typeof(WebSocket) === "undefined") {
					alert('不支持websocket')
					return;
				}
				let id = Math.random(); // 隨機數
				// 實例化socket
				var webSocket = new WebSocket(path + '?token=' + id+'&admin=1');
				// 監聽連接
				webSocket.onopen = function(event) {
					console.log(event);
					interval();
				};
				// 監聽消息
				webSocket.onmessage = function(event) {
					let data = JSON.parse(event.data);
					 pushData.selfId = data.selfId;
					if (data.code == 9002) {
						$('#content').append(
							`<p style="text-align: right;"><span style="color:chocolate;">${data.msg}</span>：客戶端</p>`
						)
					} else if (data.code == 9001) {
						$('#content').append(`<p style="color:#a09b9b;text-align:center;" >連接成功</p>`);
					}
					console.log(event)
				};
				// 監聽錯誤
				webSocket.onerror = function(event) {
					console.log(event)
					$('#content').append(`<p style="color:#a09b9b;text-align:center;" >連接錯誤</p>`);
					clearInterval();
				};
				// 發送消息
				$('#button').click(() => {
					let v = $('input').val();
					if (v) {
						pushData.code = 9002;
						pushData.msg = v;
						webSocket.send(JSON.stringify(pushData));
						$('#content').append(
							`<p>服務端：<span style="color: blueviolet;">${v}</span></p>`
						)
						$('input').val('');
					}

				})

				function interval() {
					time = setInterval(() => {
						pushData.code = 9003;
						pushData.msg = '心跳';
						webSocket.send(JSON.stringify(pushData));
					}, 5000);
				}

				function clearInterval() {
					clearInterval(time);
				}

			})
		</script>
	</body>
</html>

客戶端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>客戶端</title>
		<style type="text/css">
			#client {
				margin: 0px auto;
				width: 500px;
			}

			input {
				width: 80%;
				height: 40px;
				border-radius: 5px;
				border-color: #CCCCCC;
				outline: #01FA01;
			}

			#button {
				width: 84px;
				height: 46px;
				background-color: #5af3a5;
				color: #fff;
				font-size: 20px;
				border-radius: 5px;
				border: none;
				box-shadow: 1px 1px 1px 1px #ccc;
				cursor: pointer;
				outline: #01FA01;
			}
		</style>
	</head>
	<body>
		<div id="client">
			<h1 style="text-align: center;">客戶端發送消息</h1>
			<div id="content" contenteditable=true
				style="width: 500px;height: 500px;margin: 0px auto;border: 1px solid #000000;padding: 10px;border-radius: 10px;overflow: auto;">

			</div>
			<div style="padding: 5px;0px">
				<input type="" value="" /> <button id="button" type="button">發送</button>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$(() => {
				var pushData = {
					code: 9002,
					msg: '',
					recId: '',
				};
				var time = null;
				var path = 'ws://127.0.0.1:8009/myHandler/';
				if (typeof(WebSocket) === "undefined") {
					alert('不支持websocket')
					return;
				}
				let id = Math.random(); // 隨機數
				// 實例化socket
				var webSocket = new WebSocket(path + '?token=' + id);
				// 監聽連接
				webSocket.onopen = function(event) {
					console.log(event);
					interval();
				};
				// 監聽消息
				webSocket.onmessage = function(event) {
					let data = JSON.parse(event.data);
					if (data.code == 9002) {
						$('#content').append(
							`<p style="text-align: right;"><span style="color:chocolate;">${data.msg}</span>：服務端</p>`
						)
					} else if (data.code == 9001) {
						$('#content').append(`<p style="color:#a09b9b;text-align:center;" >連接成功</p>`);
					}
					console.log(event)
				};
				// 監聽錯誤
				webSocket.onerror = function(event) {
					console.log(event)
					$('#content').append(`<p style="color:#a09b9b;text-align:center;" >連接錯誤</p>`);
					clearInterval();
				};
				// 發送消息
				$('#button').click(() => {
					let v = $('input').val();
					if (v) {
						pushData.code = 9002;
						pushData.msg = v;
						webSocket.send(JSON.stringify(pushData));
						$('#content').append(
							`<p>客戶端：<span style="color: blueviolet;">${v}</span></p>`
						)
						$('input').val('');
					}

				})

				function interval() {
					time = setInterval(() => {
						pushData.code = 9003;
						pushData.msg = '心跳';
						webSocket.send(JSON.stringify(pushData));
					}, 5000);
				}

				function clearInterval() {
					clearInterval(time);
				}

			})
		</script>
	</body>
</html>

vue 連接 webSocket

<template>
  <div class="chat">
    <van-nav-bar fixed placeholder title="聊天內容" left-arrow />
    <div id="content" ref="rightBody">
      <div v-for="item in list" :key="item.id">
        <div class="chat-model" v-if="item.isSelf">
          <div>
            <van-image width="45px" height="45px" fit="fill" round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          </div>
          <div class="chat-content chat-content-l">
            {{item.content}}
          </div>
        </div>
        <div class="chat-model" style="justify-content: flex-end" v-else>
          <div class="chat-content chat-content-r">
            {{item.content}}
          </div>
          <div>
            <van-image width="45px" height="45px" fit="fill" round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <input type="text" v-model="text" />
      <van-button @click="onSend">發送</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        path: "ws://192.168.31.156:8009/myHandler/", // socket 地址
        socket: "",
        text: '',
        data: {
          code: 9002,
          msg: '',
          recId: '',
        },
        list: [],
        time: '', // 定時器
      }
    },
    created() {
      this.init()
    },
    methods: {
      onSend() {
        if (this.socket.readyState != 1) {
          this.$toast('連接失敗請重新進入');
          return;
        }
        if (!this.text) {
          this.$toast('請輸入內容')
          return;
        }
        var data = {
          avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          content: this.text,
          isSelf: false
        }
        this.list.push(data);
        this.send()
        this.text = '';
        this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
      },
      init: function() {
        // 0        CONNECTING        連接尚未建立
        // 1        OPEN            WebSocket的鏈接已經建立
        // 2        CLOSING            連接正在關閉
        // 3        CLOSED            連接已經關閉或不可用
        if (typeof(WebSocket) === "undefined") {
          this.$toast('您的瀏覽器不支持socket')
        } else {
          let id = Math.random(); // 隨機數
          // 實例化socket
          this.socket = new WebSocket(this.path + '?token=' + id);
          // 監聽socket連接
          this.socket.onopen = this.open
          // 監聽socket錯誤信息
          this.socket.onerror = this.error
          // 監聽socket消息
          this.socket.onmessage = this.getMessage
          // this.onHeartbeat(); // 心跳防止斷開連接
        }
      },
      open: function() {
        this.$toast('連接成功')
      },
      error: function() {
        this.$toast('連接失敗')
      },
      getMessage: function(res) {
        let t = JSON.parse(res.data);
        var data = {
          avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          content: t.msg,
          isSelf: true
        }
        if (t.code == 9002) {
          this.list.push(data);
        }
        this.data.recId = t.recId;
        this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
      },
      send: function() {
        if (this.socket) {
          this.data.code = 9002;
          this.data.msg = this.text;
          this.socket.send(JSON.stringify(this.data))
        }
      },
      close: function() {
        console.log("socket已經關閉")
      },
      onHeartbeat() {
        var time = setInterval(() => {
          this.data.code = 9003;
          this.data.msg = '心跳';
          this.socket.send(JSON.stringify(this.data))
        }, 5000);
        this.time = time;
      }

    },
    destroyed() {
      // 銷毀監聽
      clearInterval(this.time);
      this.socket.onclose = this.close
    }
  }
</script>

<style>
  .chat {
    height: 100vh;
    background-color: #f1f1f3;
  }
  #content {
    overflow: auto;
    height: 100vh;
    padding-bottom: 100px;
    background-color: #f1f1f3;
  }
  #bottom {
    position: fixed;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0px;
    background-color: #F1F1F3;
  }
  #bottom input {
    background-color: white;
    width: 72%;
    height: 30px;
    padding: 3px 5px;
    vertical-align: sub;
    border-style: none;
    border-radius: 5px;
  }
  #bottom button {
    height: 32px;
    background-color: rgb(245, 158, 1);
    border-radius: 5px;
    color: #fff;
  }
  .chat-model {
    display: flex;
    flex-direction: row;
    margin: 10px 10px;
    margin-top: 30px;
    align-items: center;
  }
  .chat-content {
    position: relative;
    max-width: 67%;
    word-break: break-all;
    word-wrap: break-word;
    top: 18px;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
  }
  .chat-content-r {
    right: 10px;
  }
  .chat-content-l {
    left: 10px;
  }
</style>

源碼地址 https://gitee.com/bxmms/web-chat.git