黑马在线聊天室(websocket)

消息推送常见方式

1. 轮询方式

  • 轮询是一种客户端与服务器之间实时通信的技术手段。客户端定期发送请求来查询服务器是否有新数据或事件，并将响应返 回给客户端。如果服务器有新的数据或事件，则将其返回给客户端；如果没有，则返回一个空响应。客户端收到响应后，可 以处理数据或事件，并根据需要继续发送下一个请求。
  • 长轮询是一种改进的轮询技术，其主要目的是降低轮询过程中的资源消耗和延迟。长轮询的基本原理是客户端发送一个 HTTP请求给服务器，并保持连接打开，直到服务器有新的数据或事件时才返回响应给客户端。在这期间，服务器会一直保持连接打开，直到超时或有新数据或事件

image-20240711220227509

2. SSE（server-sent event）：服务器发送事件

  • SSE在服务器和客户端之间打开一个单向通道

  • 服务端响应的不再是一次性的数据包，而是text/event-stream类型的数据流信息

  • 服务器有数据变更时将数据流式传输到客户端

    image-20240711222411230

3. websocket

WebSocket是一种网络通信协议，提供了一种在单个连接上进行全双工通信的途径。与HTTP不同，WebSocket在客户端和服务器之间建立一个持久的连接，这个连接在任意一方关闭之前都保持打开状态，允许数据在两个方向上实时流动。

image-20240711222730057

  • 全双工（Full Duplex）：允许数据在两个方向上同时传输。

  • 半双工（Half Duplex）：允许数据在两个方向上传输，但是同一个时间段内只允许一个方向上传输。

WebSocket应用场景：

  • 实时游戏

  • 聊天应用

  • 实时通知服务

  • 实时金融市场数据

  • 实时协作工具

WebSocket原理解析：

image-20240711224401167

在 WebSocket 协议中，建立连接时进行一次“握手”。这个握手过程与HTTP协议类似，但使用的是 WebSocket 协议的特定头部格式。在客户端发送 WebSocket 请求时，其请求头部包括一个特殊的 “Upgrade” 标识，表示希望升级连接为 WebSocket。同时还需要包含一个 “Sec-WebSocket-Key”，它是随机生成的一段字符串，用于在服务器端验证请求的合法性。

当服务器收到这个 WebSocket 请求时，会进行一次握手确认，响应头部包含一个 “Upgrade” 标识，并指明应用的协议是 WebSocket。响应头部还包含一个 “Sec-WebSocket-Accept”，这是一个根据客户端请求头部 的 “Sec-WebSocket-Key” 计算的特殊字符串。如果服务器验证通过，那么连接就被升级为 WebSocket 协议。

在建立连接之后，客户端和服务器之间可以进行任意的双向通信。WebSocket 协议支持文本和二进制数据的传输，因此可以在浏览器端实现实时聊天、游戏、文件传输等各种应用。

客户端【浏览器】API

websocket对象创建

​ let ws = new WebSocket(URL);

URL说明：

  • 格式：协议://ip地址/访问路径
  • 协议：协议名称为 ws

websocket对象相关事件

事件 事件处理程序 描述
open ws.onopen 连接建立时触发
message ws.onmessage 客户端接收到服务器发送的数据时触发
close ws.onclose 连接关闭时触发

websocket对象提供的方法

方法名称 描述
send() 通过websocket对象调用该方法发送数据给服务端

前端发送请求

  async init() {
               await axios.get("user/getUsername").then(res => {
                   this.username = res.data;
               })
//创建webSocket对象
           ws = new WebSocket("ws://localhost/chat");

           //给ws绑定事件
           ws.onopen = this.onopen;
           //接收到服务端推送的消息后触发
           ws.onmessage = this.onMessage;

           ws.onclose = this.onClose;
       }

服务端 API

Tomcat的7.0.5 版本开始支持WebSocket,并且实现了Java WebSocket规范。

Java WebSocket应用由一系列的Endpoint组成。Endpoint 是一个java对象，代表WebSocket链接的一端，对于服务端，我们可以视为处理具体WebSocket消息的接口。

我们可以通过两种方式定义Endpoint:

  • 第一种是编程式， 即继承类 javax.websocket.Endpoint并实现其方法。

  • 第二种是注解式, 即定义一个POJO, 并添加 @ServerEndpoint相关注解。

Endpoint实例在WebSocket握手时创建，并在客户端与服务端链接过程中有效，最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法， 规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下：

方法 描述 注解
onOpen() 当开启一个新的会话时调用，该方法是客户端与服务端握手成功后调用的方法 @OnOpen
onClose() 当会话关闭时调用 @OnClose
onError() 当连接过程异常时调用 @OnError

服务端如何接收客户端发送的数据呢？

  • 编程式：通过添加 MessageHandler 消息处理器来接收消息
  • 注解式：在定义Endpoint时，通过@OnMessage注解指定接收消息的方法

服务端如何推送数据给客户端呢？

发送消息则由 RemoteEndpoint 完成， 其实例由 Session 维护。

发送消息有2种方式发送消息

  • 通过session.getBasicRemote 获取同步消息发送的实例 ， 然后调用其 sendXxx()方法发送消息
  • 通过session.getAsyncRemote 获取异步消息发送实例，然后调用其 sendXxx() 方法发送消息

Endpoint示例

@ServerEndpoint("/chat")
@Component
public class ChatEndpoint {
    @OnOpen
    //连接建立时被调用
    public void onOpen(Session session, EndpointConfig config){}
    @OnMessage
    //接收到客户端发送的数据时被调用
    public void onMessage(String message){}
    @OnClose
    //连接关闭时被调用
    public void onClose(Session session){}
}

ChatEndpoint类通过实现WebSocket协议，用于处理客户端的连接、消息传递和关闭事件。

在线聊天室实现

流程分析

image-20240712081548349

消息格式

image-20240712081436012

代码实现

  1. 引入坐标

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

  2. 编写配置类，扫描添加有@ServerEndpoint注解的 Bean

@Configuration
public class WebsocketConfig {

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

通过在配置类中定义一个 ServerEndpointExporter 的 @Bean 方法，Spring 会自动创建一个 ServerEndpointExporter 实例，并将其加入到 Spring 容器中。Spring框架会在启动时通过这个实例自动扫描项目中所有使用@ServerEndpoint注解的类，并将它们注册为WebSocket端点

  1. 编写配置类，用于获取 HttpSession 对象
public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {

    @Override
    public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
        //获取HttpSession对象
        HttpSession httpSession = (HttpSession) request.getHttpSession();
        //将httpSession对象保存起来
        sec.getUserProperties().put(HttpSession.class.getName(),httpSession);
    }
}

GetHttpSessionConfig类用于在WebSocket握手过程中获取HTTP会话（HttpSession）对象，并将其保存到用户属性中，以便在WebSocket会话中使用。

  1. ChatEndpoint类

    package com.itheima.ws;

    import com.alibaba.fastjson.JSON;
    import com.itheima.config.GetHttpSessionConfig;
    import com.itheima.utils.MessageUtils;
    import com.itheima.ws.pojo.Message;
    import org.springframework.stereotype.Component;

    import javax.servlet.http.HttpSession;
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.util.Map;
    import java.util.Set;
    import java.util.concurrent.ConcurrentHashMap;

    /**
     * @version v1.0
     * @ClassName: ChatEndpoint
     * @Description: TODO(一句话描述该类的功能)
     * @Author: 黑马程序员
     */
    @ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfig.class)
    @Component
    public class ChatEndpoint {

        private static final Map<String,Session> onlineUsers = new ConcurrentHashMap<>();

        private HttpSession httpSession;

        /**
         * 建立websocket连接后，被调用
         * @param session
         */
        @OnOpen
        public void onOpen(Session session, EndpointConfig config) {
            //1，将session进行保存
            this.httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
            String user = (String) this.httpSession.getAttribute("user");
            onlineUsers.put(user,session);
            //2，广播消息。需要将登陆的所有的用户推送给所有的用户
            String message = MessageUtils.getMessage(true,null,getFriends());
            broadcastAllUsers(message);
        }

        public Set getFriends() {
            Set<String> set = onlineUsers.keySet();
            return set;
        }

        private void broadcastAllUsers(String message) {
            try {
                //遍历map集合
                Set<Map.Entry<String, Session>> entries = onlineUsers.entrySet();
                for (Map.Entry<String, Session> entry : entries) {
                    //获取到所有用户对应的session对象
                    Session session = entry.getValue();
                    //发送消息
                    session.getBasicRemote().sendText(message);
                }
            } catch (Exception e) {
                //记录日志
            }
        }

        /**
         * 浏览器发送消息到服务端，该方法被调用
         *
         * 张三  -->  李四
         * @param message
         */
        @OnMessage
        public void onMessage(String message) {
            try {
                //将消息推送给指定的用户
                Message msg = JSON.parseObject(message, Message.class);
                //获取 消息接收方的用户名
                String toName = msg.getToName();
                String mess = msg.getMessage();
                //获取消息接收方用户对象的session对象
                Session session = onlineUsers.get(toName);
                String user = (String) this.httpSession.getAttribute("user");
                String msg1 = MessageUtils.getMessage(false, user, mess);
                session.getBasicRemote().sendText(msg1);
            } catch (Exception e) {
                //记录日志
            }
        }

        /**
         * 断开 websocket 连接时被调用
         * @param session
         */
        @OnClose
        public void onClose(Session session) {
            //1,从onlineUsers中剔除当前用户的session对象
            String user = (String) this.httpSession.getAttribute("user");
            onlineUsers.remove(user);
            //2,通知其他所有的用户，当前用户下线了
            String message = MessageUtils.getMessage(true,null,getFriends());
            broadcastAllUsers(message);
        }
    }

@ServerEndpoint(value = "/chat", configurator = GetHttpSessionConfig.class) 这行代码声明了一个 WebSocket 端点，客户端可以通过 /chat 路径与之建立连接，并且在握手阶段使用 GetHttpSessionConfig 类来进行自定义配置。

该类是Spring Boot应用中的一个WebSocket端点，它用于处理聊天功能。主要功能包括：

  • 在用户建立WebSocket连接时保存用户信息和会话对象。
  • 当用户发送消息时，将消息转发给指定的接收用户。
  • 当用户断开连接时，从在线用户列表中移除用户并通知其他用户。
  • 使用GetHttpSessionConfig配置器来获取HTTP会话中的用户信息。

userController

package com.itheima.controller;

import com.itheima.pojo.Result;
import com.itheima.pojo.User;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;


@RestController
@RequestMapping("user")
public class UserController {

    /**
     * 登陆
     * @param user 提交的用户数据，包含用户名和密码
     * @param session
     * @return
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user, HttpSession session) {
        Result result = new Result();
        if(user != null && "123".equals(user.getPassword())) {
            result.setFlag(true);
            //将数据存储到session对象中
            session.setAttribute("user",user.getUsername());
        } else {
            result.setFlag(false);
            result.setMessage("登陆失败");
        }
        return result;
    }

    /**
     * 获取用户名
     * @param session
     * @return
     */
    @GetMapping("/getUsername")
    public String getUsername(HttpSession session) {

        String username = (String) session.getAttribute("user");
        return username;
    }
}

Result

package com.itheima.pojo;

import lombok.Data;

/**
 * @version v1.0
 * @ClassName: Result
 * @Description: 用来封装http请求的响应数据
 * @Author: 黑马程序员
 */
@Data
public class Result {
    private boolean flag;
    private String message;
}

User

package com.itheima.pojo;

import lombok.Data;

/**
 * @version v1.0
 * @ClassName: User
 * @Description: 接收登录请求的数据
 * @Author: 黑马程序员
 */
@Data
public class User {

    private String userId;
    private String username;
    private String password;
}

MessageUtils

package com.itheima.utils;

import com.alibaba.fastjson.JSON;
import com.itheima.ws.pojo.ResultMessage;

/**
 * @version v1.0
 * @ClassName: MessageUtils
 * @Description: 封装json格式消息的工具类
 * @Author: 黑马程序员
 */
public class MessageUtils {

    public static String getMessage(boolean isSystemMessage,String fromName, Object message) {

        ResultMessage result = new ResultMessage();
        result.setSystem(isSystemMessage);
        result.setMessage(message);
        if(fromName != null) {
            result.setFromName(fromName);
        }
        return JSON.toJSONString(result);
    }
}

Message

package com.itheima.ws.pojo;

import lombok.Data;

/**
 * @version v1.0
 * @ClassName: Message
 * @Description: 用于封装浏览器发送给服务端的消息数据
 * @Author: 黑马程序员
 */
@Data
public class Message {
    private String toName;
    private String message;
}

ResultMessage

package com.itheima.ws.pojo;

import lombok.Data;

/**
 * @version v1.0
 * @ClassName: ResultMessage
 * @Description: 用来封装服务端给浏览器发送的消息数据
 * @Author: 黑马程序员
 */
@Data
public class ResultMessage {

    private boolean isSystem;
    private String fromName;
    private Object message;//如果是系统消息是数组
}