NEWS

网站建设资讯

COMMAND

header1:value1

header2:value2

Body^@

SEND
destination:/broker/roomId/1
content-length:57

{“type":"OUT","content":"ossxxxxx-wq-yyyyyyyy"}

ws://example.com/wsapi
wss://secure.example.com/

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

    
    
    
    




    
聊天室
    

• 最上面使用 textarea 画一个对话框，用来显示聊天室的内容；中间部分添加用户加入聊天室和离开聊天室的按钮，按钮上面是输入用户名的入口；页面最下面添加发送消息的入口，页面显示效果如下：

• 接下来在页面添加 WebSocket 通讯代码：

    $(document).ready(function(){
        var urlPrefix ='ws://localhost:8080/chat-room/';
        var ws = null;
        $('#user_join').click(function(){
            var username = $('#in_user_name').val();
            var url = urlPrefix + username;
            ws = new WebSocket(url);
            ws.onopen = function () {
                console.log("建立 websocket 连接...");
            };
            ws.onmessage = function(event){
                //服务端发送的消息
                $('#message_content').append(event.data+'\n');
            };
            ws.onclose = function(){
                $('#message_content').append('用户['+username+'] 已经离开聊天室!');
                console.log("关闭 websocket 连接...");
            }
        });
        //客户端发送消息到服务器
        $('#user_send_all').click(function(){
            var msg = $('#in_room_msg').val();
            if(ws){
                ws.send(msg);
            }
        });
        // 退出聊天室
        $('#user_exit').click(function(){
            if(ws){
                ws.close();
            }
        });
    })

• 这段代码的功能主要是监听三个按钮的点击事件，当用户登录、离开、发送消息是调用对应的 WebSocket 事件，将信息传送给服务端。同时打开页面时创建了 WebSocket 对象，页面会监控 WebSocket 事件，如果后端服务和前端通讯室将对应的信息展示在页面。

2. 服务端开发

- 引入依赖

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


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

主要添加 Web 和 Websocket 组件。

- 启动类

启动类需要添加 @EnableWebSocket 开启 WebSocket 功能。

@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {

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

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

- 请求接收

• 在创建服务端消息接收功能之前，我们先创建一个 WebSocketUtils 工具类，用来存储聊天室在线的用户信息，以及发送消息的功能。首先定义一个全局变量 ONLINE_USER_SESSIONS 用来存储在线用户，使用 ConcurrentHashMap 提升高并发时效率。

public static final Map ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();

• 封装消息发送方法，在发送之前首先判单用户是否存在再进行发送：

public static void sendMessage(Session session, String message) {
    if (session == null) {
        return;
    }
    final RemoteEndpoint.Basic basic = session.getBasicRemote();
    if (basic == null) {
        return;
    }
    try {
        basic.sendText(message);
    } catch (IOException e) {
        logger.error("sendMessage IOException ",e);
    }
}

聊天室的消息是所有在线用户可见，因此每次消息的触发实际上是遍历所有在线用户，给每个在线用户发送消息。

public static void sendMessageAll(String message) {
    ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));
}

• 其中，ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message)) 是 JDK 1.8 forEach 的简洁写法。

• 这样我们在创建 ChatRoomServerEndpoint 类的时候就可以直接将工具类的方法和全局变量导入：

import static com.neo.utils.WebSocketUtils.ONLINE_USER_SESSIONS;
import static com.neo.utils.WebSocketUtils.sendMessageAll;

• 接收类上需要添加 @ServerEndpoint("url") 代表监听此地址的 WebSocket 信息。

@RestController
@ServerEndpoint("/chat-room/{username}")
public class ChatRoomServerEndpoint {
}

• 用户登录聊天室时，将用户信息添加到 ONLINE_USER_SESSIONS 中，同时通知聊天室中的人。其中，@OnOpen 注解和前端的 onopen 事件一致，表示用户建立连接时触发。

@OnOpen
public void openSession(@PathParam("username") String username, Session session) {
    ONLINE_USER_SESSIONS.put(username, session);
    String message = "欢迎用户[" + username + "] 来到聊天室！";
    logger.info("用户登录："+message);
    sendMessageAll(message);
}

• 当聊天室某个用户发送消息时，将此消息同步给聊天室所有人。其中，@OnMessage 监听发送消息的事件。

@OnMessage
public void onMessage(@PathParam("username") String username, String message) {
    logger.info("发送消息："+message);
    sendMessageAll("用户[" + username + "] : " + message);
}

• 当用户离开聊天室后，需要将用户信息从 ONLINE_USER_SESSIONS 移除，并且通知到在线的其他用户,其中，@OnClose 监听用户断开连接事件。

@OnClose
public void onClose(@PathParam("username") String username, Session session) {
    //当前的Session 移除
    ONLINE_USER_SESSIONS.remove(username);
    //并且通知其他人当前用户已经离开聊天室了
    sendMessageAll("用户[" + username + "] 已经离开聊天室了！");
    try {
        session.close();
    } catch (IOException e) {
        logger.error("onClose error",e);
    }
}

• 当 WebSocket 连接出现异常时，出触发 @OnError 事件，可以在此方法内记录下错误的异常信息，并关闭用户连接。

@OnError
public void onError(Session session, Throwable throwable) {
    try {
        session.close();
    } catch (IOException e) {
        logger.error("onError excepiton",e);
    }
    logger.info("Throwable msg "+throwable.getMessage());
}

• 到此我们服务端内容就开发完毕了。

- 测试

• 启动 spring-boot-websocket 项目，在浏览器中输入地址 http://localhost:8080/ 打开两个页面进行测试。

• 在第一个页面中以用户“小王”登录聊天室，第二个页面以“小张”登录聊天室。

小王：你是谁？
小张：你猜
小王：我猜好了！
小张：你猜的什么
小王：你猜？
小张：…

小张离开聊天室…

• 大家在两个页面模式小王和小张对话，可以看到两个页面的展示效果，页面都可实时无刷新展示最新聊天内容，页面最终展示效果如下：

看完上述内容，你们对SpringBoot中怎么使用WebSocket创建一个聊天室有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。