SpringBoot 使用WebSocket详解

后端

1、导入websocket包

    <dependency>
        <groupId></groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
        <version>2.2.</version>
    </dependency>

2、启动类配置，配置Bean

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

    /**
     * 会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     * 要注意，如果使用独立的servlet容器，
     * 而不是直接使用springboot的内置容器，
     * 就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3、Websocket工具类，记录当前在线的链接对链接进行操作

import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

public class WebsocketUtil {
  /**
   * 记录当前在线的Session
   */
  private static final Map<String, Session> ONLINE_SESSION = new ConcurrentHashMap<>();

  /**
   * 添加session
   * @param userId
   * @param session
   */
  public static void addSession(String userId, Session session){
    // 此处只允许一个用户的session链接。一个用户的多个连接，我们视为无效。
    ONLINE_SESSION.putIfAbsent ( userId, session );
  }

  /**
   * 关闭session
   * @param userId
   */
  public static void removeSession(String userId){
    ONLINE_SESSION.remove ( userId );
  }

  /**
   * 给单个用户推送消息
   * @param session
   * @param message
   */
  public static void sendMessage(Session session, String message){
    if(session == null){
      return;
    }
    // 同步
    RemoteEndpoint.Async async = session.getAsyncRemote ();
    async.sendText ( message );
  }

  /**
   * 向所有在线人发送消息
   * @param message
   */
  public static void sendMessageForAll(String message) {
    //jdk8 新方法
    ONLINE_SESSION.forEach((sessionId, session) -> sendMessage(session, message));
  }
}

4、控制类

import com.example.simcardfees.utils.WebsocketUtil;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;

/**
 * websocket接口处理类
 */
@Component
@ServerEndpoint(value = "/chat/{userId}")
public class WebsocketController {
    /**
     * 连接事件，加入注解
     * @param userId
     * @param session
     */
    @OnOpen
    public void onOpen(@PathParam(value = "userId") String userId, Session session) {
        String message = "[" + userId + "]加入聊天室！！";
        // 添加到session的映射关系中
        WebsocketUtil.addSession(userId, session);
        // 广播通知，某用户上线了
        WebsocketUtil.sendMessageForAll(message);
    }

    /**
     * 连接事件，加入注解
     * 用户断开链接
     *
     * @param userId
     * @param session
     */
    @OnClose
    public void onClose(@PathParam(value = "userId") String userId, Session session) {
        String message = "[" + userId + "]退出了聊天室...";
        // 删除映射关系
        WebsocketUtil.removeSession(userId);
        // 广播通知，用户下线了
        WebsocketUtil.sendMessageForAll(message);
    }

    /**
     * 当接收到用户上传的消息
     *
     * @param userId
     * @param session
     */
    @OnMessage
    public void onMessage(@PathParam(value = "userId") String userId, Session session, String message) {
        String msg = "[" + userId + "]:" + message;
        System.out.println("接收到信息：" + msg);
        // 直接广播
        WebsocketUtil.sendMessageForAll(msg);
    }

    /**
     * 处理用户活连接异常
     *
     * @param session
     * @param throwable
     */
    @OnError
    public void onError(Session session, Throwable throwable) {
        try {
            session.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        throwable.printStackTrace();
    }
}

前端页面

1、前端普通js页面

userId根据业务需求自己定义，属于唯一标识

	const socket = new WebSocket('ws://127.0.0.1:8080/chat/userId');

    // 成功连接 WebSocket 服务器的回调函数
    socket.onopen = function() {
        console.log('WebSocket 连接成功');
        // 向服务器发送消息
        socket.send('Hello Server');
    };

    // 接收到来自 WebSocket 服务器的消息时的回调函数
    socket.onmessage = function(event) {
        console.info(event)
        const message = event.data;
        console.log('接收到服务器的消息：', message);
    };

    // WebSocket 连接关闭时的回调函数
    socket.onclose = function(event) {
        console.log('WebSocket 连接关闭');
    };

    // WebSocket 连接发生错误时的回调函数
    socket.onerror = function(error) {
        console.error('WebSocket 发生错误：', error);
    };

求关注~~~

点关注不迷路，喜欢的朋友们关注支持一下
给点继续写的动力，感谢！！