基于websocket搭建聊天室

基于websocket搭建聊天室

1.后端配置

1.依赖一个web一个websocket

 
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-websocket
        

2.config

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

@Configuration
public class WebSocketConfig {

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


}

3.ws

import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;


@Component
@ServerEndpoint("/ws/chat/{username}")
public class WebSocketServer {

    private static final CopyOnWriteArraySet clients = new CopyOnWriteArraySet<>();
    // 存储在线用户（线程安全）
    private static final Map userMap = new ConcurrentHashMap<>();
    private Session session;
    private String username; // 当前用户
    @OnOpen
    public void onOpen(@PathParam("username") String username, Session session) {
        this.username = username;
        userMap.put(username, session);
        this.session = session;
        clients.add(this);
        System.out.println("用户 " + username + " 连接成功，当前在线人数：" + clients.size());
        sendMessage("欢迎 " + username + " 加入聊天室！");
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println("收到消息：" + message);
        broadcast(message);
    }

    @OnClose
    public void onClose() {
        clients.remove(this);
        userMap.remove(username);
        System.out.println("用户 " + username + " 断开连接，当前在线人数：" + clients.size());
        broadcast("用户 " + username + " 离开聊天室");
        System.out.println("连接关闭：" + session.getId());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("用户 " + username + " 发生错误：" + error.getMessage());
    }

    private void broadcast(String message) {
        for (WebSocketServer client : clients) {
            try {
                client.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发送消息给某个用户
     */
    private void sendMessage(String message) {
        try {
            if (userMap.containsKey(username)) {
                userMap.get(username).getBasicRemote().sendText(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

2.前端

1.vue2+element ui

2.前端代理vue.config.js

"use strict"
const path = require("path")

function resolve(dir) {
  return path.join(__dirname, dir)
}
const name =  "vue Template"
module.exports = {
  publicPath: "./",
  assetsDir: "static",
  lintOnSave: false,
  devServer: {
    proxy: {
      "^/socket": {
        target: "ws://localhost:8888",
        ws: true,
        changeOrigin: true,
        pathRewrite: {'/socket':''}
      },
      "^/api": {
        target: "http://localhost:8888",
        changeOrigin: true,
        // pathRewrite: {'/datashare':'/'}
      },

    },
  },
  productionSourceMap: false,
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },

}

3.测试代码