【面试题精讲】什么是websocket?如何与前端通信?

简介: 【面试题精讲】什么是websocket?如何与前端通信?

有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top

首发博客地址

系列文章地址


什么是WebSocket?

WebSocket是一种在Web应用程序中实现双向通信的协议。它允许在客户端和服务器之间建立持久的、全双工的连接,以便实时地发送数据。

传统的HTTP协议是一种无状态的请求-响应协议,客户端发送请求,服务器返回响应,然后连接立即关闭。这种模型适用于大多数Web应用程序,但对于需要实时数据更新或双向通信的应用程序来说,它并不理想。

WebSocket通过在客户端和服务器之间建立长久的TCP连接,提供了一种持久性的通信通道。它通过在HTTP握手过程中升级连接,从而允许在同一个连接上进行双向通信。

WebSocket的特点包括:

  1. 双向通信:WebSocket允许客户端和服务器之间双向发送数据,而不仅仅是客户端向服务器发送请求。
  2. 实时性:WebSocket提供了高效的实时数据传输,可以在数据可用时立即将其推送给客户端。
  3. 较低的开销:WebSocket使用较少的网络开销,因为它使用持久连接而不需要频繁的握手和头部信息。
  4. 兼容性:WebSocket协议已经得到了广泛的支持,现代的Web浏览器和服务器都可以很好地支持WebSocket。

WebSocket在许多实时应用程序中得到广泛应用,例如聊天应用程序、实时协作工具、股票市场报价、多人游戏等。它提供了一种强大的机制,使得开发者可以轻松实现实时和双向的Web应用程序。

Spring Boot如何实现WebSocket

在Spring Boot中,可以使用Spring WebSocket模块来实现WebSocket功能。以下是使用Spring Boot实现WebSocket的基本步骤:

  1. 添加依赖:在 pom.xml文件中添加以下依赖,以引入Spring WebSocket和Tomcat WebSocket的支持:
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-websocket</artifactId>
</dependency>
  1. 创建一个WebSocket处理器类:创建一个类,实现 org.springframework.web.socket.handler.TextWebSocketHandler ,并重写 handleTextMessageafterConnectionEstablished等方法来处理WebSocket事件。
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class MyWebSocketHandler extends TextWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的文本消息
    }
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 处理连接建立事件
    }
}
  1. 配置WebSocket端点:创建一个配置类,继承自 org.springframework.web.socket.config.annotation.WebSocketConfigurer ,并重写 registerWebSocketHandlers方法来注册WebSocket处理器和端点。
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }
}
  1. 启动应用程序:编写一个Spring Boot启动类,并添加 @SpringBootApplication注解来启动应用程序。
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class MyApplication {
    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

通过这些步骤,您可以在Spring Boot中实现WebSocket功能。客户端可以使用JavaScript的WebSocket 对象或其他WebSocket客户端库来连接到您的WebSocket端点。

请注意,上述代码只是一个基本示例,您可以根据实际需求进行更复杂的WebSocket实现。另外,还可以使用@MessageMapping 注解来处理特定消息类型,使用SimpMessagingTemplate发送消息给订阅了特定主题的客户端等。

前端如何与websocket通信

在前端处理WebSocket连接和消息,您可以使用JavaScript的WebSocket API来实现。以下是基本的前端处理步骤:

  1. 创建WebSocket对象:使用 WebSocket构造函数创建一个WebSocket对象,并传入WebSocket服务器的URL。
var socket = new WebSocket("ws://localhost:8080/your-application/websocket");
  1. 监听WebSocket事件:通过WebSocket对象的事件处理程序,监听WebSocket的连接状态和消息事件。
socket.onopen = function () {
    // 连接建立后的操作
};
socket.onclose = function () {
    // 连接关闭后的操作
};
socket.onerror = function (error) {
    // 错误处理
};
socket.onmessage = function (event) {
    var message = event.data;
    // 处理收到的消息
};
  1. 发送消息:使用WebSocket对象的 send方法发送消息到WebSocket服务器。
socket.send("Hello, server!");
  1. 关闭连接:使用WebSocket对象的 close方法关闭WebSocket连接。
socket.close();

通过这些步骤,您可以在前端处理WebSocket连接和消息。您可以根据实际需求,在事件处理程序中实现您的业务逻辑,例如更新UI、发送和接收数据等。

请注意,WebSocket连接是异步的,所以您需要适当处理连接建立、关闭和错误事件。此外,还可以使用其他WebSocket库(如Socket.io、SockJS等)来简化WebSocket处理,并提供更多高级功能,如自动重连、心跳检测等。

如何使用Python与websocket通信

要实现Python和Spring Boot WebSocket的通信,可以使用Python的WebSocket客户端库与Spring Boot的WebSocket服务器进行通信。以下是一种常见的实现方式:

  1. 安装WebSocket客户端库:使用Python的包管理工具(如pip)安装websocket-client库。
pip install websocket-client
  1. 在Python中创建WebSocket连接:在Python代码中导入websocket库,并创建一个WebSocket连接到Spring Boot的WebSocket服务器。
import websocket
def on_message(ws, message):
    # 处理收到的消息
    print(f"Received: {message}")
def on_error(ws, error):
    # 处理错误
    print(f"Error: {error}")
def on_close(ws):
    # 处理连接关闭
    print("Connection closed")
def on_open(ws):
    # 处理连接建立
    print("Connection established")
    # 发送消息
    ws.send("Hello from Python!")
websocket.enableTrace(True)
ws = websocket.WebSocketApp("ws://localhost:8080/your-websocket-endpoint",
                            on_message=on_message,
                            on_error=on_error,
                            on_close=on_close)
ws.on_open = on_open
ws.run_forever()
  1. 在Spring Boot中处理WebSocket消息:在您的Spring Boot应用程序中创建WebSocket处理器类,处理来自Python客户端的消息。
import org.springframework.stereotype.Component;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的消息
        System.out.println("Received: " + message.getPayload());
        // 发送消息给Python客户端
        session.sendMessage(new TextMessage("Hello from Spring Boot!"));
    }
}

确保WebSocket端点的URL路径在Python和Spring Boot代码中匹配,并根据实际情况进行调整。

通过这些步骤,您可以在Python和Spring Boot之间建立WebSocket通信。当Python客户端发送消息时,Spring Boot服务器将接收并处理该消息,并可以向Python客户端发送响应消息。

本文由 mdnice 多平台发布


相关文章
|
22天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
45 5
|
3月前
|
设计模式 前端开发 算法
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
|
3月前
|
消息中间件 缓存 前端开发
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
|
3天前
|
JSON JavaScript 前端开发
服务器通信:使用WebSocket与后端实时交互
【4月更文挑战第24天】WebSocket为解决服务器与客户端实时双向通信问题而生,常用于聊天、游戏和实时通知等场景。本文通过4步教你实现WebSocket通信:1) 客户端使用JavaScript创建WebSocket连接;2) 监听`open`、`message`和`close`事件;3) 使用`send`方法发送数据;4) 使用`close`方法关闭连接。服务器端则需处理连接和数据发送,具体实现依后端技术而定。WebSocket为现代Web应用的实时交互提供了强大支持。
|
1月前
|
存储 缓存 监控
2024年春招小红书前端实习面试题分享
春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
76 3
|
1月前
|
前端开发 数据可视化 安全
2024金三银四必看前端面试题!简答版精品!
2024金三银四必看前端面试题!2w字精品!简答版 金三银四黄金期来了 想要跳槽的小伙伴快来看啊
85 3
|
2月前
|
存储 前端开发 JavaScript
前端面试:如何实现并发请求数量控制?
前端面试:如何实现并发请求数量控制?
84 0
|
2月前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
274 0
|
2月前
|
存储 前端开发 安全
无限连接:前端跨页面通信的实现与应用
在前端开发中,有时我们需要在不同的页面之间进行数据传递和交互。这种场景下,前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法,并提供一些代码示例和引用资料,帮助读者深入了解并应用这一重要的技术。
|
3月前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
197 0