Websocket入门（文末含在线聊天demo源码）

最新推荐文章于 2024-10-03 16:42:53 发布

cuitchen

最新推荐文章于 2024-10-03 16:42:53 发布

阅读量279

点赞数 3

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/weixin_48232263/article/details/138526766

版权

Websocket入门（文末含在线聊天demo源码）

什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的网络协议。它使得客户端和服务器之间的数据交换变得更加高效和实时，适用于实时聊天、在线游戏等需要即时通信的应用场景。

WebSocket解决了什么痛点

WebSocket解决了传统的HTTP通信模型中存在的一些通点，包括：

实时性和效率：
传统的HTTP请求-响应模式在每次通信中都需要建立新的连接，而WebSocket在建立连接后可以保持长久的通信会话，实现了实时的双向通信，减少了通信的开销和延迟。
减少资源消耗：
由于WebSocket 可以在单个TCP连接上进行全双工通信，因此可以减少服务器和客户端之间的资源消耗，包括网络带宽和服务器负载。
更少的网络开销： WebSocket使用较少的网络开销来维护连接，相比于HTTP轮询或长轮询等技术，能够更有效地利用网络资源。
支持跨域通信： WebSocket协议支持跨域通信，允许在不同源之间进行实时数据交换，而不需要像传统的HTTP请求那样受到同源策略的限制。

总的来说，WebSocket解决了传统HTTP通信模型中存在的延迟高、效率低、资源消耗大等问题，使得实时通信变得更加高效和便捷。

SpringBoot中怎么使用WebSocket

在pom中引入依赖

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

添加ServerEndpointExporter

@Component
public class WebConfig {

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

新建WebSocket处理类，其中url参数可自定义

@Component
@ServerEndpoint(value = "/wsserver/{userId}/{userName}")
public class WsServe {
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId, @PathParam("userName") String userName) {
        log.info("{}用户上线, 用户id{}",userName, userId);
        session.getUserProperties().put("userId", userId);
        //clients中添加连接的客户端
        WsConnectConfig.CLIENTS.put(userId, session);


        //通知在线用户更新列表
        this.updateFriends(userId, true);
    }
}

常用注解

@OnOpen:当WebSocket连接建立时将被调用。可以在这个方法中执行一些初始化操作。
@OnMessage:当收到WebSocket消息时将被调用。可以在这个方法中处理接收到的消息并进行相应的处理。
@OnClose:当WebSocket连接关闭时将被调用。可以在这个方法中执行一些清理操作。
@OnError:当WebSocket发生错误时将被调用。可以在这个方法中处理错误并进行相应的处理。
在这里插入图片描述

在前端项目中怎么使用WebSocket

const socket = new WebSocket('ws://localhost:8888');

socket.onopen = (event) => {
   console.log('WebSocket connection opened:', event);
};

socket.onmessage = (event) => {
};

socket.onclose = (event) => {
   console.log('WebSocket connection closed:', event);
};