当前位置：首页 > article >正文

【Java】—— 基于Websocket实现页面聊天效果

article 2025/1/17 12:52:19

基于SpringBoot+Vue和Websocket实现页面聊天效果，如下：

一、WebSocket 的主要特点

全双工通信：一旦 WebSocket 连接建立，客户端和服务器就可以随时相互发送消息，而不需要一方必须先发起请求。
较少的控制开销：数据帧格式相对简单，不像 HTTP 那样每次通信都需要携带首部信息，减少了传输的数据量。
连接持久化：与 HTTP 不同，WebSocket 连接是持久化的。一旦建立连接，除非浏览器或服务器主动关闭，否则连接将一直保持打开状态。
跨域通信支持：WebSocket 天然支持跨域通信，无需像 AJAX 那样处理复杂的跨域资源共享 (CORS) 策略。

二、工作流程

握手阶段：WebSocket 通过 HTTP 协议开始通信，客户端发送一个特殊的 HTTP 请求到服务器，请求升级协议到 WebSocket。
建立连接：如果服务器同意升级，则双方成功建立 WebSocket 连接，之后的通信不再使用 HTTP 协议。
数据传输：连接建立后，客户端和服务器可以通过这个连接互相发送消息。
关闭连接：任一方都可以关闭 WebSocket 连接。

三、应用场景

即时通讯：如聊天应用、在线客服等。
实时更新：股票价格、体育赛事比分等需要实时更新的应用。
多人游戏：支持多个用户同时参与的游戏。
协作工具：文档协同编辑、白板协作等。

四、后端实现

1、导入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、定义配置类


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

@Configuration
public class WebSocketConfig {

    /**
     * 注册基于@ServerEndpoint声明的Websocket Endpoint
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

3、定义服务端组件


import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

@Slf4j
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {

    private static Map<String,Session> sessionMap = new HashMap<>();

    /**
     * 连接建立时触发
     * @param session
     * @param sid
     */
    @OnOpen
    public void onOpen(Session session , @PathParam("sid") String sid) {
        log.info("有客户端连接到了服务器 , {}", sid);
        sessionMap.put(sid, session);
    }

    /**
     * 服务端接收到消息时触发
     * @param session
     * @param message
     * @param sid
     */
    @OnMessage
    public void onMessage(Session session , String message, @PathParam("sid") String sid) {
        log.info("接收到了客户端 {} 发来的消息 : {}", sid ,message);
    }

    /**
     * 连接关闭时触发
     * @param session
     * @param sid
     */
    @OnClose
    public void onClose(Session session , @PathParam("sid") String sid) {
        System.out.println("连接断开:" + sid);
        sessionMap.remove(sid);
    }

    /**
     * 通信发生错误时触发
     * @param session
     * @param sid
     * @param throwable
     */
    @OnError
    public void onError(Session session , @PathParam("sid") String sid , Throwable throwable) {
        System.out.println("出现错误:" + sid);
        throwable.printStackTrace();
    }

    /**
     * 广播消息
     * @param message
     * @throws IOException
     */
    public void sendMessageToAll(String message) throws IOException {
        Collection<Session> sessions = sessionMap.values();
        if(!CollectionUtils.isEmpty(sessions)) {
            for (Session session : sessions) {
                // 服务器向客户端发送消息
                session.getBasicRemote().sendText(message);
            }
        }
    }
}

4、定义定时任务

定时向客户端推送数据，这里是向控制台输入并发送给前端。

@Scheduled(cron = "0/5 * * * * ?") 是 Spring Framework 中用于定时任务调度的一个注解使用方式。具体来说，这个注解是用于标记一个方法应该按照指定的 cron 表达式来定期执行。

关于 "0/5 * * * * ?" 这个 cron 表达式的含义：

0/5：表示从第0秒开始，每5秒执行一次。这里的第一位指的是秒。
*：分钟字段，星号表示每分钟。
*：小时字段，星号表示每小时。
*：日期字段，星号表示每天。
*：月份字段，星号表示每月。
?：星期字段，问号表示不指定具体的值。在 cron 表达式中，当不需要指定某一项时可以使用 ? 来代替，通常用于日期和星期字段冲突的情况。


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.time.LocalDateTime;
import java.util.Scanner;


@Component
public class MessageTask {

    @Autowired
    private WebSocketServer webSocketServer;

    @Scheduled(cron = "0/5 * * * * ?")
    public void sendMessageToAllClient() throws IOException {
        Scanner scanner = new Scanner(System.in);
        while (scanner.hasNextLine()) {
            String message = scanner.nextLine();
            webSocketServer.sendMessageToAll(message);
        }
    }
}

五、前端主要代码

前端只提供了核心代码，可自由发挥，实现聊天效果或其他实时数据刷新效果。

<script setup>
// websocket
var websocket = null;
var clientId = Math.random().toString(36).substr(2);

//挂载完成的钩子函数
  //判断当前浏览器是否支持WebSocket
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://localhost:8080/ws/" + clientId); //连接WebSocket节点
  } else {
    alert('Not support websocket')
  }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(){
        setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
      //接收到后端数据后执行的代码，event.data得到数据
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //发送消息
    function sendMessage(text){
        websocket.send(text);
    }

	//关闭连接
    function closeWebSocket() {
        websocket.close();
    }
</script>

查看全文

http://www.kler.cn/a/506426.html