【面试题精讲】什么是websocket?如何与前端通信?
> 有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准`https://blog.zysicyj.top`
[首发博客地址](https://blog.zysicyj.top/)
[系列文章地址](https://blog.zysicyj.top/categories/技术文章/后端技术/系列文章/面试题精讲/)
什么是WebSocket?
WebSocket是一种在Web应用程序中实现双向通信的协议。它允许在客户端和服务器之间建立持久的、全双工的连接,以便实时地发送数据。
传统的HTTP协议是一种无状态的请求-响应协议,客户端发送请求,服务器返回响应,然后连接立即关闭。这种模型适用于大多数Web应用程序,但对于需要实时数据更新或双向通信的应用程序来说,它并不理想。
WebSocket通过在客户端和服务器之间建立长久的TCP连接,提供了一种持久性的通信通道。它通过在HTTP握手过程中升级连接,从而允许在同一个连接上进行双向通信。
WebSocket的特点包括:
双向通信:WebSocket允许客户端和服务器之间双向发送数据,而不仅仅是客户端向服务器发送请求。
实时性:WebSocket提供了高效的实时数据传输,可以在数据可用时立即将其推送给客户端。
较低的开销:WebSocket使用较少的网络开销,因为它使用持久连接而不需要频繁的握手和头部信息。
兼容性:WebSocket协议已经得到了广泛的支持,现代的Web浏览器和服务器都可以很好地支持WebSocket。
WebSocket在许多实时应用程序中得到广泛应用,例如聊天应用程序、实时协作工具、股票市场报价、多人游戏等。它提供了一种强大的机制,使得开发者可以轻松实现实时和双向的Web应用程序。
Spring Boot如何实现WebSocket
在Spring Boot中,可以使用Spring WebSocket模块来实现WebSocket功能。以下是使用Spring Boot实现WebSocket的基本步骤:
- 添加依赖:在
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>
- 创建一个WebSocket处理器类:创建一个类,实现
org.springframework.web.socket.handler.TextWebSocketHandler
,并重写handleTextMessage和afterConnectionEstablished等方法来处理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 {
// 处理连接建立事件
}
}
- 配置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("*");
}
}
- 启动应用程序:编写一个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来实现。以下是基本的前端处理步骤:
- 创建WebSocket对象:使用
WebSocket构造函数创建一个WebSocket对象,并传入WebSocket服务器的URL。
var socket = new WebSocket("ws://localhost:8080/your-application/websocket");
- 监听WebSocket事件:通过WebSocket对象的事件处理程序,监听WebSocket的连接状态和消息事件。
socket.onopen = function () {
// 连接建立后的操作
};
socket.onclose = function () {
// 连接关闭后的操作
};
socket.onerror = function (error) {
// 错误处理
};
socket.onmessage = function (event) {
var message = event.data;
// 处理收到的消息
};
- 发送消息:使用WebSocket对象的
send方法发送消息到WebSocket服务器。
socket.send("Hello, server!");
- 关闭连接:使用WebSocket对象的
close方法关闭WebSocket连接。
socket.close();
通过这些步骤,您可以在前端处理WebSocket连接和消息。您可以根据实际需求,在事件处理程序中实现您的业务逻辑,例如更新UI、发送和接收数据等。
请注意,WebSocket连接是异步的,所以您需要适当处理连接建立、关闭和错误事件。此外,还可以使用其他WebSocket库(如Socket.io、SockJS等)来简化WebSocket处理,并提供更多高级功能,如自动重连、心跳检测等。
如何使用Python与websocket通信
要实现Python和Spring Boot WebSocket的通信,可以使用Python的WebSocket客户端库与Spring Boot的WebSocket服务器进行通信。以下是一种常见的实现方式:
- 安装WebSocket客户端库:使用Python的包管理工具(如pip)安装websocket-client库。
pip install websocket-client
- 在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()
- 在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多平台发布
【面试题精讲】什么是websocket?如何与前端通信?的更多相关文章
- javascript之面试题精讲
from:http://blog.csdn.net/q121516340/article/details/51332454 1,检测数组的几种方式: Array.isArray(); es5 toSt ...
- 【我给面试官画饼】Python自动化测试面试题精讲
那今天给家分享的是一个面试主题. 就比如说我们的自动化测试,自动化如何去应对面试官,和面试官去聊一聊自动化的心得,自动化你现在去面试的时候是一个非常重要的一个关键点,所以如果你在这方面有一定的心得.那 ...
- 微软BI SSIS 2012 ETL 控件与案例精讲面试 200 问(SSIS 面试题,ETL 面试题)
开篇介绍 本自测与面试题出自 微软BI SSIS 2012 ETL 控件与案例精讲 (http://www.hellobi.com/course/21) 课程,对于学完本课程的每一课时和阅读完相关辅助 ...
- Linux实战教学笔记12:linux三剑客之sed命令精讲
第十二节 linux三剑客之sed命令精讲 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件 ...
- Linux实战教学笔记18:linux三剑客之awk精讲
Linux三剑客之awk精讲(基础与进阶) 标签(空格分隔): Linux实战教学笔记-陈思齐 快捷跳转目录: * 第1章:awk基础入门 * 1.1:awk简介 * 1.2:学完awk你可以掌握: ...
- Java岗 面试考点精讲(基础篇01期)
即将到来金三银四人才招聘的高峰期,渴望跳槽的朋友肯定跟我一样四处找以往的面试题,但又感觉找的又不完整,在这里我将把我所见到的题目做一总结,并尽力将答案术语化.标准化.预祝大家面试顺利. 术语会让你的面 ...
- 微软BI SSIS 2012 ETL 控件与案例精讲课程学习方式与面试准备详解
开篇介绍 微软BI SSIS 2012 ETL 控件与案例精讲 (http://www.hellobi.com/course/21) 课程从2014年9月开始准备,到2014年12月在 天善BI学院 ...
- (转)linux route命令深入浅出与实战案例精讲
linux route命令深入浅出与实战案例精讲 http://blog.51cto.com/oldboy/1119453 深入浅出之-route命令实战使用指南 http://blog.51cto. ...
- (转)不看绝对后悔的Linux三剑客之sed实战精讲
不看绝对后悔的Linux三剑客之sed实战精讲 原文:http://blog.51cto.com/hujiangtao/1923718 二.Linux三剑客之sed命令精讲 1,前言 我们都知道,在L ...
- (转)不看绝对后悔的Linux三剑客之awk实战精讲
原文:http://blog.51cto.com/hujiangtao/1923930 一.Linux三剑客之awk命令精讲 第1章 awk基础入门 1.1 awk简介 awk不仅仅时linux系统中 ...
随机推荐
- TypeScript开篇
1.什么是TypeScript(TS)? Typescript 为 JS 带来了类型能力,如今已被越来越多的大型前端项目选用.Typescript 的出现大大改善了开发体验,增强了代码的可维护性和稳定 ...
- Kubernetes常见错误总结
1.屏幕持续打印Pod日志报error: unexpected EOF错误 Kubernetes: requesting flag for "kubectl logs" to av ...
- 从部署和运维说说DLI(1)
DLI是支持多模引擎的Serverless大数据计算服务,其很好的实现了Serverless的特性: 1. 弱化了存储和计算之间的联系: 2. 代码的执行不再需要手动分配资源: 3. 按使用量计费 ...
- HDC.Cloud2021|开发者们都在谈的云原生到底长什么样?
摘要:云原生数据库基于存储与计算分离架构,与传统数据库相比,具备高性能.高扩展.一致性.易管理和多云支持等特性,在海量数据处理.智能存储.业务应用等方面表现出了强大的生命力. 近几年,云原生的风越刮越 ...
- Sechunter移动应用隐私合规检测详解
摘要:本文简要介绍Sechunter移动应用隐私合规检测的方法步骤,以及目标检测技术在其中的应用. 本文分享自华为云社区<移动应用隐私合规检测简介及目标检测技术的应用>,作者:wolfre ...
- 多领域应用落地,火山引擎ByteHouse加速云数仓升级
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台VeDI直播活动「超话数据」在线举办,来自火山引擎的产品及解决方案专家分享了以ByteH ...
- 对不起,你做的 A/B 实验都是错的——火山引擎 DataTester 科普
DataTester 是火山引擎数智平台旗下产品,能基于先进的底层算法,提供科学分流能力和智能的统计引擎,支持多种复杂的 A/B 实验类型.DataTester 深度耦合推荐.广告.搜索.UI.产品功 ...
- 应用火山引擎 DataTester“避坑”,抖音实现用 A/B 实验快速试错
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 A/B 测试产品可以说是企业科学决策的基础"设施",能够帮助企业快速迭代产品. 在字节跳动,每 ...
- Flask小知识集合
全局变量g的使用 flask在上下文中提供了四种变量,分别是: 变量名 上下文 说明 current_app 应用上下文 当前激活程序的程序实例 g 应用上下文 处理请求时用作临时存储的对象.每次请求 ...
- 【vue3】创建vue3项目的两种方式 setup函数 ref和reactive 计算和监听属性 生命周期 hooks toRefs script setup的作用和lang=ts 后台管理模板
目录 昨日回顾 今日内容 1 vue3介绍 2 创建vue3项目的两种方式 vue-cli创建Vue3项目 Vite创建Vue3项目 Vue3目录结构 Vite的优点 3 setup函数 Vue3创建 ...