SpringBoot+WebSockct 一小时打造在线群聊

WebSocket 是 H5 提供的一种在单个 TCP 连接上进行全双工通讯的协议,客户端和服务器经过一次握手后就可以相互通信,相比传统的Ajax轮询方式速度更快性能更优

进入群聊首先输入昵称

然后畅所欲言

项目完整代码

1. 后端

1.1 maven 依赖

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.51</version>
        </dependency>

    </dependencies>

1.2 注册Controller(群聊路由) 注入ServerEndpointExporter

ServerEndpointExporter会自动注册使用@ServerEndpoint注解声明的Websocket endpoint

@Configuration
public class SpringConfig implements WebMvcConfigurer{
	public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("chat");
    }
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

1.3 实现WebSocketHandler

@Service
@ServerEndpoint("/websocket/{name}")
public class WebSocketService {
    private static String NAME = "name";
    private static final Set<Session> sessions = new CopyOnWriteArraySet<>();
    private static final List<String> onlines = new CopyOnWriteArrayList<>();
    private Session curr_session;
    private String name;

    @OnOpen
    public void open(Session session, @PathParam("name") String name) {
        this.curr_session = session;
        this.name = session.getPathParameters().get(NAME);
        this.name = name;
        onlines.add(name);
        sessions.add(session);
        sendMessage( JSON.toJSONString(onlines),false); //更新在线成员
    }

    @OnClose
    public void close() {
        onlines.remove(name);
        sessions.remove(curr_session);
        sendMessage( JSON.toJSONString(onlines),false); //更新在线成员
    }

    @OnMessage
    public void onMessage(String message) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        map.put("mess", message);
        sendMessage(JSON.toJSONString(map), true); //广播消息
    }

    public void sendMessage(String message, boolean exceptU) {
        for (Session session : sessions) {
            if (exceptU && session == curr_session) continue; //不发给自己
            try {
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

2. 前端

2.1 布局

<div class="container">
    <div class="left">
    div>
    <div class="right">
        <div class="chat-name"><p>ChatDemop>div>
        <div class="chat-box">div>
        <div class="text-box">
            <textarea name="" id="" cols="30" rows="10" class="text">textarea>
            <button class="send">Send(Ctrl+Enter)button>
        div>
    div>
div>

2.2核心function也是唯一function

(function WebSocketDemo() {
        if ("WebSocket" in window) {
            // 打开一个 web socket
            var name = prompt("请输入你的昵称", "工具人");
            var ws = new WebSocket("ws://localhost:8000/websocket/"+name);
            var method = {
                send: function () {
                    var mess = document.querySelector(".text").value;
                    document.querySelector(".text").value = "";
                    ws.send(mess);
                    mess=(mess.split('\n').map(function (item) {
                        return `${item}
`;
                    })).join("");
                    var chatBox = document.querySelector(".chat-box");
                    chatBox.innerHTML = chatBox.innerHTML + `
                            

                                ${name}

                                
${mess}  
                                

                           
 `
                        },
                updateOnlineList:function(data){
                    var left=document.querySelector(".left");
                    left.innerHTML=`
在线成员(${data.length})
`
                    data.forEach(v=> {
                        left.innerHTML = left.innerHTML + `
${v}
`;
                    });
                }
            }
            ws.onopen = function () {
                // Web Socket 已连接上，使用 send() 方法发送数据
                document.querySelector(".send").onclick = method.send;
                window.addEventListener("keydown", function (ev) {
                    if (ev.code == "Enter" && ev.ctrlKey) {
                        method.send();
                    }
                })
            };

            ws.onmessage = function (evt) {
                data=JSON.parse(evt.data)
                if(data.mess!=undefined) {
                    var chatBox = document.querySelector(".chat-box");
                    mess = data.mess;
                    console.log(data)
                    mess = (mess.split('\n').map(function (item) {
                        return `${item}
`;
                    })).join("");
                    chatBox.innerHTML = chatBox.innerHTML + `
                            

                                ${data.name}

                                
${mess}
                                

                           
                         `;
                }else{
                    method.updateOnlineList(data);
                }
            };
            ws.onclose = function () {
                // 关闭 websocket
            };
        }
        else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    })();