Web前端之WebSocket

最新推荐文章于 2024-08-28 14:03:15 发布
最新推荐文章于 2024-08-28 14:03:15 发布
阅读量1.3k 收藏 10
点赞数 2
分类专栏： # JavaScript 文章标签： js WebSocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisa_lisa/article/details/88290085
版权
WebSocket是HTML5提供的全双工通信协议，解决了HTTP的半双工和实时性问题。它允许服务器主动向客户端推送数据，广泛应用于实时交互场景，如聊天室。WebSocket的特点包括双向通信、TCP基础上的低延迟和良好的HTTP兼容性。使用WebSocket需要创建WebSocket对象，指定连接URL，通过其属性和事件进行通信。
摘要由CSDN通过智能技术生成

什么是WebSocket？

  • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
  • 在 WebSocket API中，浏览器和服务器只需要完成一次握手，两者就直接可以创建持久性的连接，并进行双向数据传输。
  • websocket弥补了HTTP不支持长连接的特点。

了解双向通信

在WebSocket协议之前有三种实现双向通信的方式：轮询（polling）、长轮询（long-polling）和 iframe流（streaming）。

  • 轮询：是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。而且每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率。

  • 长轮询：是对轮询的改进版，客户端发送HTTP给服务器之后，看有没有新消息，如果没有新消息，就一直等待。当有新消息的时候，才会返回给客户端。- 优点：比 Polling 做了优化，有较好的时效性；

  • iframe流：方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。

双向通信的优缺点

通信方式 优点 缺点
轮询 实现简单，
无需做过多的更改		 轮询的间隔过长，会导致用户不能及时接收到更新的数据； 轮询的间隔过短，会导致查询请求过多，增加服务器端的负担
长轮询 比轮询做了优化，有较好的时效性 保持连接会消耗资源；服务器没有返回有效数据，程序超时
iframe流 消息能够实时到达；浏览器兼容好 服务器维护一个长连接会增加开销；IE、chrome、Fire
最低0.47元/天 解锁文章
呱呱•.•
关注
专栏目录
web前端使用websocket获取ActiveMQ消息队列
赵佳佳的博客
02-24 2948
1.websocket 1、websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 2、websocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 3、websocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 2.activeMQ 1、MQ:Message Queue 消息队列，就是用来在系统之间进行消息传递的。 2、MQ俗称消息队列,也称为消息中间件,是一种在分布式系统中应用程序借以
如何在前端实现WebSocket发送和接收TCP消息（多线程模式)
笔者从事电信媒体开发多年，愿意将多年的开发经验分享给同行
08-18 2316
如何在前端实现WebSocket发送和接收TCP消息（多线程模式)
websocket前端Demo.zip
09-06
websocket前端访问客户端demo,HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单
前端WebSocket
m0_53956340的博客
07-02 516
项目中用到的相关技术vue3、vite、js(要通过WebSocket构造函数，创建WebSocket对象)、node.js、ws(是nodejs的一个WebSocket库，可以用来创建服务)websocket实际项目开发中客户端（前端）使用websockect主要实现的功能是发送和接收信息而服务端实现接收、转发（负责两个客户端通信类似于一个通信基站）、发送消息功能。websocket服务端以node.js中使用为例（实际项目开发中可使用其他后端语言如java、python等）message （接收消息）
前端开发——熟悉WebSocket（包含示例）
最新发布
m0_72678953的博客
08-28 645
双向通信：既可以是客户端向服务端发起请求，也可以是服务端向客户端发起请求持久链接：在没有执行断开链接操作，websocket连接会一直保持，不必重复请求连接低延迟：其实是第二点带来的好处轻量级：暂时没找到权威的答案，一说为：WebSocket 协议的数据头部相对较小。
WebSocket- 前端篇
程小博衍的博客
08-29 1805
websocket-前端使用步骤
前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议
杜永康的博客
10-24 9885
在当今互联网时代，实时通信已成为很多应用的需求。为了满足这种需求，WebSocket协议被设计出来。WebSocket是一种基于TCP议的全双工通信协议，通过WebSocket，Web应用程序可以与服务器建立持久的连接，实现实时双向数据输，提供极低的延迟和高效的数据传输。
WebSocket 前端深入介绍
西装暴徒_12138的博客
03-26 2165
WebSocket 是一个先进的技术，它使得在用户的浏览器和服务器之间可以开启一个交互式通信会话。使用WebSocket API，你可以向服务器发送消息并接收基于事件的响应，而无需轮询服务器获取新数据。
前端实现WebSocket即时通讯
m0_67401270的博客
03-09 1802
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。 HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。 WebSocket 协议的底层协议也是TCP协议 WebSocket 协议的标识符为ws,加密后为wss WebSocket 协议没有同源限制，即WebSocke
webSocket使用（前端）
m0_57594854的博客
03-08 1293
前端连接webSocket
前端web端使用WebSocket进行通信
L2043524156的博客
05-28 1276
WebSocket 是一种在 Web 开发中用于实现双向通信的协议，它允许客户端和服务器之间建立持久的连接，以便在连接上进行实时的数据传输。相较于传统的 HTTP 请求，WebSocket 具有更低的延迟和更高的效率，适用于需要实时性较高的场景，比如聊天应用、实时数据展示等。
websocket前端实现
weixin_39876518的博客
07-31 509
<script> varwebsocket if('WebSocket'inwindow){ websocket=newWebSocket('ws://172.22.212.157:8080/websocket') }else{ alert('你的浏览器暂不支持websocket,请更换其他浏览器再试') } websocket.onopen=function(event){ console.log('建立连接') } websoc...
Web WebSocket编程
Heqianqian的博客
02-04 934
1.为什么需要WebSocket 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。 举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。 这种单向请求的特点，注定了
前端WebSocket详解
热门推荐
u011200562的博客
02-10 1万+
websocket是H5才开始提供的一种在单个TCP连接上进行全双工通讯的协议。主要作用就是建立服务器和客户端的长连接能更好的节省服务器资源和带宽，服务器向浏览器推流实现实时通信。 和http一样，WebSocket也是应用层协议。浏览器和服务器只要完成一次握手的动作，然后浏览器和服务器之间就会脱离http协议，而是用WebSocket自己的ws协议。客户端和服务器端就可以通过tcp连接直接交换数据。 说了这么多好处，接下来讲讲到到底怎么用。 首先要创建一个WebSocket对象： var So.
前端WebSocket入门，看这篇就够啦！！
ORANGE_3iING的博客
07-31 1717
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与 HTTP 协议不同的是，WebSocket 允许服务器和客户端在连接建立后能够在不需要重新请求的情况下，相互发送数据。即浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。这个特性使得 WebSocket 特别适合于需要实时数据交换的应用场景。握手过程WebSocket 连接的建立始于客户端的 HTTP 请求。服务器接收到请求后，会进行确认 并切换为 WebSocket 协议，从而建立连接。
初识websocket（前端）
weixin_46032200的博客
10-22 622
websocket是window对象自带的，无需下载包 前端的简单使用： //引入websocket let ws = new WebSocket('后端服务器') //监听链接 ws.onopen = ()=>{ console.log('连接成功了'); } // 监听数据消息 ws.onmessage = (msg)=>{ console.log('接收到的消息:'+msg); } // 监听关闭 ws.onclose = ()=>{ console.log('连接关闭了
前端 WebSocket 的使用
weixin_48845614的博客
09-01 1万+
WebSocket
前端使用websocket发送消息,建立连接(详细)。【前端】
weixin_55451254的博客
08-25 4640
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。在 WebSocket 中，客户端和服务器之间可以互相发送消息。客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。
前端使用websocket
08-12
### 回答1： 前端可以使用 WebSocket API 来实现 WebSocket 通信。具体步骤如下： 1. 创建 WebSocket 对象：使用 `new WebSocket(url)` 方法创建一个 WebSocket 对象，其中 `url` 是 WebSocket 服务器的地址。 2. 监听事件：WebSocket 对象提供了多种事件，如 `onopen`、`onmessage`、`onerror` 和 `onclose` 等。可以通过监听这些事件来处理 WebSocket 的状态和收发数据。 3. 发送消息：使用 `WebSocket.send(data)` 方法向服务器发送消息，其中 `data` 是要发送的数据。 4. 关闭连接：使用 `WebSocket.close()` 方法关闭连接。 下面是一个简单的示例代码： ```javascript // 创建 WebSocket 对象 const socket = new WebSocket('ws://localhost:8080'); // 监听事件 socket.onopen = function() { console.log('WebSocket 连接已建立'); }; socket.onmessage = function(event) { console.log('收到服务器消息：', event.data); }; socket.onerror = function(error) { console.error('WebSocket 错误：', error); }; socket.onclose = function(event) { console.log('WebSocket 连接已关闭'); }; // 发送消息 socket.send('Hello, WebSocket!'); // 关闭连接 socket.close(); ``` ### 回答2： 前端使用WebSocket是一种通过HTTP协议建立的双向通信技术，它可以实现实时的数据传输和接收。前端通过WebSocket与服务器建立连接后，可以发送和接收数据，实现实时更新和交互。 首先，前端需要使用JavaScript中的WebSocket API进行WebSocket的连接，通过WebSocket构造函数可以创建WebSocket对象。在创建WebSocket对象时，需要传入服务器的URL作为参数，指定服务器的地址。 一旦连接建立，前端可以通过WebSocket对象的send方法向服务器发送数据。服务器收到前端发送的数据后，可以处理并给前端返回数据。前端通过WebSocket对象的onmessage事件来监听服务器返回的数据，在收到数据后可以对数据进行处理和展示。 除了发送和接收数据，前端还可以监听WebSocket连接的状态。WebSocket对象有一个readyState属性，可以判断连接的状态，常用的状态有OPEN，CLOSED等。 前端通过WebSocket技术可以实现一些实时性要求较高的功能，比如实时聊天、实时数据展示等。相比传统的HTTP请求和响应模式，WebSocket可以减少不必要的网络延迟和请求开销，提供更好的用户体验。 总而言之，前端使用WebSocket可以在浏览器和服务器之间建立实时的双向通信，通过发送和接收数据，实现实时的更新和交互。这为前端开发提供了更多的可能性，使得Web应用可以更加灵活和实用。 ### 回答3： 前端使用WebSocket是一种实时通信的网络协议，它能够在浏览器和服务器之间建立一个持久的连接，实现双向的即时通信。 传统的网页通信是基于HTTP协议，即浏览器向服务器发送请求，服务器返回响应，这种通信模式无法实现服务器主动向浏览器推送数据。而WebSocket能够解决这个问题，它允许服务器和客户端之间建立一个双向的通信通道，实现实时数据传输。 前端使用WebSocket的步骤如下： 1. 创建WebSocket对象：在浏览器中，我们可以通过JavaScript的`new WebSocket(url)`来创建一个WebSocket对象，其中url是服务器的地址。 2. 监听事件：WebSocket对象有多个事件用于监听不同的状态或数据。常用的事件有`onopen`、`onmessage`、`onclose`和`onerror`。`onopen`事件在连接建立时触发，`onmessage`事件在接收到服务器发送的数据时触发，`onclose`事件在连接关闭时触发，`onerror`事件在遇到错误时触发。 3. 发送和接收数据：可以通过WebSocket对象的`send()`方法向服务器发送数据，服务器通过`onmessage`事件接收到数据后可以进行相应处理，并通过`send()`方法向客户端发送数据。 4. 关闭连接：连接不再需要时，可以通过WebSocket对象的`close()`方法手动关闭连接。 前端使用WebSocket可以实现很多实时性要求较高的功能，例如在线聊天、实时协作、实时数据展示等。它相比于传统的轮询方式，能够减少服务器的压力，提高系统的响应速度。但需要注意的是，由于WebSocket是一种新的协议，不是所有浏览器都支持，因此在使用时需要考虑兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值