前端websocket使用心得-------二进制数据传输

最新推荐文章于 2024-07-13 18:12:23 发布
最新推荐文章于 2024-07-13 18:12:23 发布
阅读量1.8w 收藏 19
点赞数 3
分类专栏： 前端技术 文章标签： websocket 二进制 ArrayBuffer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wiki_Wei/article/details/90287984
版权
本文探讨了在前端使用WebSocket进行二进制数据传输，特别是ArrayBuffer的应用。通过WebSocket实现长连接，适用于实时交互场景如聊天。详细介绍了如何初始化WebSocket连接，监听其状态变化，以及使用FileReader读取文件并转化为ArrayBuffer。在发送文件时，需要添加头部信息以便于后台识别请求，通过视图对象处理ArrayBuffer，实现多个视图的拼接，从而完成数据的完整发送。
摘要由CSDN通过智能技术生成

                                    前端websocket使用心得-------二进制数据传输

在由于websocket是长连接，所以在一些业务场景下，前后台的交互使用websocket通讯会比较合适，具体场景不赘述，比如说实时聊天等。

本文主要简述一下前端如何使用websocket。

1、js有H5的window内置对象中有websocket方法，这个 通过new方法可以获取到websocket通讯的客户端。使用如下方法初始化一个websocket连接，获取客户端连接对象。

plugin = new wsSocket('ws://localhost:8000/server');
plugin = new wsSocket('wss://localhost:8000/server');

其中wss为安全连接。这里需要注意，在https的路径下是不可以使用ws连接的（firefox及低版本chrome）。

2、此处列出几个websocket的几个监听方法

onOpen  ：监听连接成功

onerror：连接出错

   onClose：连接断开

  onMessage：收

最低0.47元/天 解锁文章
wiki_Wei
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端通过Axios获取后台的二进制数据流，进行64进行转换，并在网页上进行显示。
weixin_65257540的博客
08-11 2328
前端通过Axios获取后台的二进制数据流，进行64进行转换，并在网页上进行显示。
obs-websocket-5.0.1-Windows
12-13
"使用到的obs-websocket-5.0.1-Windows"表明该压缩包提供了具体的操作环境，即Windows版的5.0.1版本的obs-websocket，用户可以直接下载安装进行实践。 **标签解析：** "windows" 指出这是与Windows系统相关的应用；...
webSocket使用详情
世间万物皆不如你
06-30 7768
WebSocket是一种在Web浏览器和服务器之间进行双向通信的协议。它允许在一个持久化的TCP连接上进行实时的、双向通信。WebSocket协议是HTML5中的一项新技术，它可以用于替代传统的轮询和长轮询方法。本文将详细介绍WebSocket的使用方法，并提供代码示例。
【软件测试】深度解析 WebSocket 原理
软件自动化测试技术交流、资源分享
11-06 98
​WebSocket 是什么？WebSocket是一种新型的协议，它可以在客户端和服务器之间建立长连接，实现双向通信。在传统的 HTTP 协议中，当客户端向服务器发送请求后，服务器会返回响应，然后连接就会断开。而在 WebSocket 中，会话可以一直保持打开，直到某一方关闭连接为止。 ​
【QT开发】WebSocket通信QWebSocket类详解及实战应用
最新发布
科技改变人类，技术成就未来
07-13 1343
QWebSocket是Qt提供的一个功能强大且灵活的WebSocket通信类，通过本篇文章的学习，你应该对QWebSocket有了全面的理解，能够在自己的项目中正确使用它。QWebSocket在用户界面中帮助你实现实时数据传输和消息推送，实现交互式和响应式的实时通信，有助于创建用户友好和高效的实时通信应用场景。
WebSocket之JS发送二进制
思月行云
11-29 3991
WebSocket之JS发送二进制 老鼠AI大米_Java全栈 原文：WebSocket之JS发送二进制 - 简书 (jianshu.com) 大家都知道使用socket通信都是二进制，通信框架多是使用二进制通信，高效且快速，但在前端如何编辑发送二进制，二进制数据在日常的JavaScript中很少遇到，但是当你使用WebSocket与后端进行数据交互时，就有可能会用到二进制的数据格式。 JS如何存储和操作二进制 JavaScript中用ArrayBuffer来存储二进制数据。 JavaScr
使用 WebSocket 发送二进制数据：最佳实践
02-02 2431
);});
websocket 二进制数据传输基础准备工作
weixin_33989058的博客
04-03 2669
二进制与十六进制 二进制用 0 1 表示 2= 10 十六进制 前缀0x 用0123456789ABCDEF表示 2= 0x2 二进制与十六进制的转换 十六进制的每位 等于二进制的四位 十六进制 0xF = 15(十进制) = 1111(二进制) 十六进制每位最大就是二进制的 1111 = 15(十进制) 二进制 2 = 10 十六进制 2 = 0x2 = 0010 规律很清晰了吧 20 =...
webService、webSocket、socket、http之间的区别
yaowang107的博客
11-30 772
HTTP HTTP 是基于请求响应式的，即通信只能由客户端发起，服务端做出响应，无状态，无连接。 无状态：每次连接只处理一个请求，请求结束后断开连接。 无连接：对于事务处理没有记忆能力，服务器不知道客户端是什么状态。 以往实现即时通讯的手段： 轮询：客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信息并关闭连接。 长轮询：客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
WebSocket 二进制传输 AES加密和解密
LANGZI7758521的专栏
07-25 5338
最近一直在弄WebSocket，然后必然会遇到二进制传输 1.客户端设置 // 二进制方式接收数据 ws.binaryType = 'arraybuffer'; 这样设置以后客户端接收的数据就是ArrayBuffer，注意大小写，我设置为区分大小写居然浏览器会警告。 2.php服务端发送和接收加密二进制数据 /** * openssl aes 加密 */ function c...
websocket-heartbeat-js:简单而有用
05-02
websocket-heartbeat-js 介绍websocket-heartbeat-js基于浏览器javascript的WebSocket ，其主要目的是确保Web客户端和服务器之间的连接，并具有心跳检测和自动重新连接的机制。 当客户端设备出现网络中断或服务器...
关于Python的websocket-server
12-03
关于Python的websocket-server，不能接收二进制及接收性能低的 今天做一个找图的项目中，中间健是用websocket-server。发现用下来找图并不慢，我是用OpenCV找图，居然慢在通信上面，传一个5M的文件要10来秒，晕，不...
websocket-as-promised：用于WebSocket的基于Promise的API
02-04
import WebSocketAsPromised from 'websocket-as-promised' ; const wsp = new WebSocketAsPromised ( 'ws://example.com' ) ; await wsp . open ( ) ; wsp . send ( 'message' ) ; await wsp . close ( ) ; 内容 ...
使用Sec-Websocket-Protocol
04-08
标题中的“使用Sec-Websocket-Protocol”是指在WebSocket通信中使用`Sec-WebSocket-Protocol`头部字段来定义自定义的子协议。WebSocket协议允许在客户端和服务器之间建立持久的全双工连接，用于实时数据交换。而`Sec...
基于Websocket实现导出二进制文件
FangNiuDaHu的博客
08-12 458
最近做了一个导出功能，基于Websocket和后端通信，记录一下。业务场景是要导出一份文件，文件中带有附件，数据资源可能会很大，后端分成切片返回，前端再组装成完整文件，通过websocket这种长链接方式实现。
netty实现websocket发送文本和二进制数据
huan的学习记录
11-09 1万+
最近在学习netty相关的知识，看到netty可以实现 websoket，因此记录一下在netty中实现websocket的步骤，主要实现传递文本消息和传递二进制消息（此处只考虑是图片），如果是别的消息可以考虑使用自定义协议。 需求： 1、使用 netty 实现 websocket 服务器 2、实现 文本信息 的传递 3、实现 二进制 信息的传递，默认...
no-referrer-when-downgrade什么意思
热门推荐
lxw1844912514的博客
03-12 3万+
no referrer when downgrade的意思：降级时不推荐。 从一个网站链接到另外一个网站会产生新的http请求，referrer是http请求中表示来源的字段。 no-referrer-when-downgrade表示从https协议降为http协议时不发送referrer给跳转网站的服务器。 在页面引入图片、JS 等资源，或者从一个页面跳到另一个页面，都会产生新的...
解决使用WebSocket向前端进行数据推送，但数据变为二进制流[object Blob]的问题
nicole27ll的博客
12-01 5491
最近在做基于Vue的数据可视化的项目，使用koa2进行后台项目开发，引入webSocket对前后端代码进行改造，保持浏览器和服务端之间的长连接。 一、需要解决的问题 在进行前后端数据交互的测试时，发现存在客户端获取的数据与服务端发送的数据不一致的情况。如下： 二、解决方案 在反复确认代码正确的情况下，尝试对比之前能正确获取数据的服务器的初始化文件。 发现解决这个现象的办法就是更改package.json中webSocket依...
删除符合一定条件的若干行数据
ch206265的博客
10-13 1291
关键： #删除month字段中内容是'1/','2/','6/','7/','8/','9/','10','11','12'的行 data=data[~(data['month'].isin(['1/','2/','6/','7/','8/','9/','10','11','12']))] #仅删除字段名为month的一整列数据 data=data.drop(['month'],axis=1) import pandas as pd import numpy as np #导入数据 #data .
netty-websocket-spring-boot-starter使用案例
06-01
netty-websocket-spring-boot-starter是一个基于Netty实现的WebSocket框架，可以方便地在Spring Boot应用中集成WebSocket功能。使用该框架可以快速构建实时通信、消息推送等功能。 下面是一个使用netty-websocket-spring-boot-starter的简单案例： 1. 在pom.xml中添加依赖： ```xml <dependency> <groupId>com.github.wujiuye</groupId> <artifactId>netty-websocket-spring-boot-starter</artifactId> <version>1.0.0.RELEASE</version> </dependency> ``` 2. 编写WebSocket处理器 ```java @ServerEndpoint("/websocket/{userId}") @Component public class WebSocketHandler { private static final Logger logger = LoggerFactory.getLogger(WebSocketHandler.class); private Session session; private String userId; @OnOpen public void onOpen(Session session, @PathParam("userId") String userId) { this.session = session; this.userId = userId; logger.info("WebSocket连接建立，userId: {}", userId); } @OnMessage public void onMessage(String message) { logger.info("收到来自客户端的消息：{}", message); sendMessage("服务端已收到消息：" + message); } @OnClose public void onClose() { logger.info("WebSocket连接关闭，userId: {}", userId); } @OnError public void onError(Throwable t) { logger.error("WebSocket连接异常，userId: {}", userId, t); } public void sendMessage(String message) { try { this.session.getBasicRemote().sendText(message); } catch (IOException e) { logger.error("发送WebSocket消息失败，userId: {}", userId, e); } } } ``` 3. 配置WebSocket 在配置类中添加@EnableWebSocket注解，启用WebSocket功能，同时，也可以配置WebSocket的一些参数，例如端口号、路径等。 ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private WebSocketHandler webSocketHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(webSocketHandler, "/websocket/{userId}") .setAllowedOrigins("*"); } } ``` 4. 测试WebSocket 使用浏览器或WebSocket客户端连接WebSocket服务端，例如：ws://localhost:8080/websocket/123，其中123为userId。 以上就是一个简单的netty-websocket-spring-boot-starter使用案例。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值