您现在的位置是:首页 >技术交流 >Websocket网站首页技术交流

Websocket

BroRiver 2024-10-10 12:01:05
简介Websocket

目录

什么是Websocket?

Websocket有什么用?

WebSocket的原理

WebSocket与Http

上代码~

依赖

配置

实现端点类

前端


什么是Websocket?

        WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它能够在客户端和服务器之间双向传递数据,不需要通过 HTTP 请求和响应交互

        传统的 HTTP 协议是基于请求和响应模型的,客户端向服务器发送请求并等待服务器响应后才能进行下一步操作,这种模型适合短暂的交互,但不适合长时间的实时通信。而 WebSocket 则提供了一种实时通信的解决方案,它能够在客户端和服务器之间建立一条全双工通信的通道,使得客户端和服务器可以实时地彼此发送和接收数据。

        举个例子你就明白了

日常生活中,我们打电话和朋友实时通话,不需要等待对方回复短信之类的吧?

        WebSocket 就像一条可以一直通话的电话线路,我们可以在客户端和服务器之间建立一条全双工通信的通道,使得客户端和服务器可以实时地彼此发送和接收数据。这样就可以让我们更方便地进行实时通信,比如在线聊天、网络游戏、股票行情...

Websocket有什么用?

主要作用就是 实现客户端和服务器之间的实时双向通信,它可以在单个 TCP 连接上进行全双工通信,避免了 HTTP 请求和响应的开销,提高通信的效率

除了实时双向通信外,WebSocket 还有以下特点:

跨域支持:WebSocket 可以跨域访问,方便了客户端和服务器的通信。
可靠性:WebSocket 提供了心跳机制,可以检测连接状态,保证通信的可靠性。
高效性:WebSocket 可以在单个 TCP 连接上进行全双工通信,避免了 HTTP 请求和响应的开销,提高了通信的效率。
安全性:WebSocket 通过 SSL/TLS 加密保护通信数据,提高了通信的安全性。
灵活性:WebSocket 可以与各种编程语言和框架集成,适用于不同类型的应用场景。

WebSocket的原理

通过 HTTP 协议建立连接,然后升级协议到 WebSocket 协议,建立一条持久的双向通信通道。WebSocket在建立握手时,数据是通过HTTP传输的。建立之后,真正传输时就不需要HTTP协议了。

WebSocket与Http

首先我们要知道,WebSocket 和 HTTP 都是基于 TCP 的可靠性传输协议,并且都是应用层协议

HTTPWebSocket
通信模式请求-响应协议  单向、短连接全双工通信协议    双向、长连接
性能特性面向事务的协议,每个请求和响应都是一个独立的事务,不会保存客户端和服务器之间的状态信息。支持实时双向通信,避免了 HTTP 请求和响应的开销,提高了通信效率,同时也支持异步 I/O 模型,可以更好地处理大量的并发连接
适用场景适用于请求-响应模式的场景,例如 Web 页面的静态资源请求、数据传输等WebSocket 适用于实时通信场景,例如在线聊天、多人协作、实时游戏等
安全性HTTP 可以使用 SSL/TLS 加密协议来保证通信的安全性。WebSocket 的安全性较低,通信过程中可能存在一些安全风险,例如中间人攻击和数据泄露等
兼容性HTTP 协议的版本较多,可以兼容不同的浏览器和服务器。WebSocket 是 HTML5 标准中的一部分,因此在一些旧的浏览器中可能不支持

总结: 

实现实时通信,HTTP 只能通过轮询客户端不断的发送请求的方式来获取最新消息,但是轮询会不断的请求、响应,会加大通信开销,效率很低。而 WebSocket 可以通过双向全双工通信实时获取最新消息。所以WebSocket 是更好的选择

传输静态内容,考虑安全性、简单性、兼容性,HTTP 更合适


上代码~

在 Java 中使用 WebSocket 技术,需要导入相关的依赖;前端可以直接使用 JavaScript 原生的 WebSocket API 进行开发。

依赖

引入 Spring Boot 中的 WebSocket 模块

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

配置

注册 WebSocket 端点(Endpoint)到应用程序中。

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

返回一个 ServerEndpointExporter 对象 (Spring WebSocket 组件),用于扫描并注册所有使用 @ServerEndpoint 注解的 WebSocket 端点。这样,在应用程序中就可以直接使用这些 WebSocket 端点,实现实时通信功能。

实现端点类

通过注解声明WebSocket事件处理方法。这些方法分别处理 WebSocke 连接打开、连接关闭、消息接收和错误处理等事件

@Service
@Slf4j
@ServerEndpoint("/webSocket")
public class WebSocket {
    //连接打开
    @OnOpen
    public void onOpen(Session session) {  
    }

    //连接关闭调用
    @OnClose
    public void onClose() {
    }

    //收到客户端消息后调用
    @OnMessage
    public void onMessage(String message) throws IOException, InterruptedException {  
/*
    可以使用异步机制实现实时的消息传输时,程序将消息发送到 Redis 或其他消息队列中,
    然后立即返回响应,不会阻塞当前线程。当 Redis 或其他消息队列中有新的消息时,
    程序会异步地从队列中取出消息并发送给客户端。
    这样可以避免程序在等待 Redis 或其他队列中的消息时阻塞当前线程,
    提高应用程序的吞吐量和并发性能。  */  
    }

    //发送错误时的处理
    @OnError
    public void onError(Session session, Throwable error) {
    }
}

如果想要持久化/存储 WebSocket 消息,可以注入一个 RedisTemplate对象到 MovieWeb 类中使用

private  static   RedisTemplate<String,Object> redisTemplate;
@Autowired
public void redisTemplate(RedisTemplate<String,Object> redisTemplate){
    WebSocket.redisTemplate=redisTemplate;
}

前端

使用 JavaScript 实现 WebSocket 客户端程序

  1. 创建 WebSocket 连接,指定 WebSocket 服务端的地址和路径
  2. 为WebSocket 对象的属性赋值一个函数,用于处理 WebSocket 连接建立时的事件。当 WebSocket 连接建立成功时,这个函数会被自动调用,从而执行相关的操作。
  3. WebSocket 接收到消息时的事件处理函数
  4. WebSocket 关闭时的事件处理函数
let ws = new WebSocket("ws://localhost:8080/websocket");
 
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.");
};

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。