【面试题精讲】什么是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 多平台发布


相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
2月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
135 7
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
1月前
|
Kubernetes Cloud Native JavaScript
为使用WebSocket构建的双向通信应用带来基于服务网格的全链路灰度
介绍如何使用为基于WebSocket的云原生应用构建全链路灰度方案。
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
4月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
58 2
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
46 0
下一篇
DataWorks