html5:webSocket 基础使用

这篇具有很好参考价值的文章主要介绍了html5:webSocket 基础使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、理解 HTML5 WebSocket

HTML5 WebSocket是一种新型的网络协议,它能够在客户端和服务器之间建立实时的双向通信通道,使得浏览器和服务器之间的数据传输更加高效、快速和可靠。相比传统的HTTP协议,WebSocket协议使用更少的网络开销,能够实现较小的数据包传输和更低的延迟,能够支持实时数据更新的场景。

HTML5 WebSocket的使用方式比较简单,可以通过JavaScript中的WebSocket对象来创建WebSocket连接,并通过send()方法向服务器发送数据,通过onmessage()方法接收服务器返回的数据。目前,WebSocket协议已经广泛应用于实时聊天、在线游戏、语音视频聊天、股票行情等领域。

二、WebSocket协议的特点

1、支持双向通信:WebSocket协议允许客户端和服务器之间实时、双向的通信,无需像HTTP协议那样需要发送请求来获取数据。
2、更少的网络开销:WebSocket协议使用更少的网络开销,能够实现较小的数据包传输和更低的延迟。
3、长连接:WebSocket协议使用长连接,不需要频繁地建立和关闭连接,减少了传输数据的延迟时间。
4、跨域访问:WebSocket协议支持跨域访问,允许浏览器和服务器之间跨域实现实时通信。
5、WebSocket 是一个独立的协议,不同于 HTTP,但是在使用时可以通过 HTTP 来建立连接;6、WebSocket 的协议标识符是 "ws" 或 "wss",分别对应于普通的 WebSocket 和基于 SSL 的 WebSocket;
7、WebSocket 支持带有握手的协议,类似于 HTTP/1.1 的 Upgrade 和 Connection 头;
8、WebSocket 是一个双向数据传输的协议,也就是说服务器和客户端都可以主动发送数据;9、9、WebSocket 使用的是 TCP 协议,在传输层上可靠性较高。

三、WebSocket 常用属性

1、WebSocket.readyState:只读属性,表示 WebSocket 连接的当前状态。它的值可以是以下四个常量之一:

WebSocket.CONNECTING (0):表示正在建立连接。
WebSocket.OPEN (1):表示连接已经建立成功。
WebSocket.CLOSING (2):表示连接正在关闭。
WebSocket.CLOSED (3):表示连接已经关闭或者没有建立成功。

2、WebSocket.bufferedAmount:只读属性,表示还没有被发送到服务器的字节数。当调用 send() 方法发送数据时,数据会被放入发送缓存区中,直到被实际发送出去。这个属性可以用来检查发送缓存区中是否还有待发送的数据。

3、WebSocket.extensions:只读属性,表示服务器选择的 WebSocket 扩展列表。WebSocket 扩展是一种标准化的协议扩展,可以提供额外的功能和性能优化。

4、WebSocket.protocol:只读属性,表示服务器选择的子协议名称。子协议是一种应用层协议扩展,可以在 WebSocket 连接中定义一组特定的数据格式或行为。

5、WebSocket.url:只读属性,表示 WebSocket 对象连接的 URL 地址。该属性包含了协议、主机名、端口号和资源路径等信息。

四、WebSocket 生命周期 四个阶段

1、连接建立阶段:WebSocket 对象创建后,需要连接 WebSocket 服务器,完成握手协议。在这个阶段,WebSocket 对象会触发 open 事件,表示连接已经建立成功。

2、数据传输阶段:连接建立成功后,可以通过 WebSocket 对象进行双向数据传输。在这个阶段,WebSocket 对象会触发 message 事件,表示收到了来自服务器的数据,也可以使用 send() 方法向服务器发送数据。

3、关闭连接阶段:当通信结束,或者出现异常情况时,需要关闭 WebSocket 连接。在这个阶段,WebSocket 对象会触发 close 事件,表示连接已经关闭。

4、异常处理阶段:在进行 WebSocket 通信时,有可能出现网络故障、服务端异常等问题。在这些异常情况下,WebSocket 对象会触发 error 事件,表示出现了错误。

需要注意的是,WebSocket 生命周期的第一个阶段是必须的,而后面三个阶段则是可选的,取决于实际的业务需求和网络情况。例如,在某些情况下,WebSocket 连接可能会一直保持打开状态,直到用户手动关闭或者网络中断。

五、HTML5 WebSocket 接收的参数

1、URL:要连接的 WebSocket 服务器的 URL。

2、Protocols(可选):一个可选的协议字符串或协议数组,表示与服务器通信时使用的协议。如果不指定,则可以使用任何协议。

3、Options(可选):一些可选的配置参数,用于控制 WebSocket 连接的行为,如超时、缓冲区大小等。这些选项通常与底层的操作系统或浏览器实现有关。

例如,以下代码演示了如何创建一个 WebSocket 对象:

var socket = new WebSocket("ws://localhost:8080", ["protocol1", "protocol2"], {timeout: 5000});

其中,第一个参数是 URL,表示要连接的 WebSocket 服务器的地址和端口号;第二个参数是一个可选的协议字符串或协议数组,表示与服务器通信时使用的协议;第三个参数是一个可选的选项对象,包含一些可配置的参数,例如超时时间等。

六、使用 HTML5 WebSocket 的过程

1、在 Web 应用程序中创建 WebSocket 对象,指定连接的 URL;

2、建立连接后,可以发送数据给服务器端,服务器端也可以发送数据给客户端;

3、连接一旦关闭,就不能再发送数据,需要重新创建 WebSocket 对象进行连接。

七、HTML5 WebSocket 需要后端配合吗

是的,

HTML5 WebSocket 需要后端配合。具体来说,WebSocket 需要在后端实现一个 WebSocket 服务器,该服务器能够接收 WebSocket 请求,并在客户端和服务器之间建立 WebSocket 连接。通常情况下,后端可以使用一些 WebSocket 服务器库(如 Node.js 的 Socket.IO 或 Java 的 Java-WebSocket)来实现 WebSocket 服务器。在客户端,HTML5 提供了 WebSocket API,让客户端能够与服务器建立 WebSocket 连接、发送和接收 WebSocket 消息。因此,HTML5 WebSocket 需要客户端和服务器的配合。

八、简单的 HTML5 WebSocket 实例

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>WebSocket Test</title>
</head>
<body>
<script>
   var socket = new WebSocket("ws://localhost:8080");

   // 连接成功时触发
   socket.onopen = function(event) {
       socket.send("Hello, Server!");
   };

   // 接收到消息时触发
   socket.onmessage = function(event) {
       console.log("Received data: " + event.data);
   };

   // 连接关闭时触发
   socket.onclose = function(event) {
       console.log("Connection closed.");
   };
</script>
</body>
</html>

在这个例子中,创建了一个 WebSocket 对象并指定了连接的 URL,接着设置了 onopen、onmessage 和 onclose 事件的回调函数来处理连接状态和接收数据。最后,使用 socket.send() 方法发送数据到服务器。

九、欢迎交流指正,关注我,一起学习

参考链接

滑动验证页面

https://www.cnblogs.com/web-learn/p/15148141.html

HTML5 WebSocket 详解及使用_html websocket_祖先森、的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-624896.html

到了这里,关于html5:webSocket 基础使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 猿创征文|我的前端——【HTML5】基础成长学习之路

    文章目录 前言 一、网页的基本组成 1.什么是网页 2.什么是HTML 3.网页的形成  二、常用的浏览器 1.常用的浏览器 2.浏览器内核 三、Web标准 1.为什么需要web标准 2.Web标准的构成 在一次机缘巧合之下了解并接触到CSDN,从此开启了我IT学习之路,我的目前是希望成为全栈型技术开

    2024年02月20日
    浏览(41)
  • 02-前端基础第二天-HTML5

    能够书写表格 能够写出无序列表 能够写出3~4个常用input表单类型 能够写出下拉列表表单 能够使用表单元素实现注册页面 能够独立查阅W3C文档 表格标签 列表标签 表单标签 综合案例 查阅文档 表格是实际开发中非常常用的标签: 表格的主要作用 表格的基本语法 1.1表格的主要

    2024年02月12日
    浏览(36)
  • 前端学习——HTML5

    新增布局标签 新增状态标签 新增列表标签 新增文本标签 新增表单控件属性 input新增type属性值 新增视频标签 新增音频标签

    2024年02月12日
    浏览(55)
  • html5前端学习

    定义HTML文档,浏览器看到后就明白这个是HTML文档,所以其他元素要包裹在它里面,标签限定了文档的开始点和结束点。 head标签用于定义文档的头部,描述了文档的各种属性和信息,包括文档的标题、在Web的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会

    2024年02月08日
    浏览(50)
  • [前端基础]websocket协议

    (1)websocket websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了. websocket协议具有天然的优势处理前端多线程并发,并且只需要一

    2024年02月08日
    浏览(40)
  • html5前端学习2

    一篇思维题题解: 第五周任务 [Cloned] - Virtual Judge (vjudge.net) K - Summer Vacation-CSDN博客  快捷键: Ctrl+Alt+Down        向下选取 Ctrl+Alt+Up             向上选取(会出现多个光标,可以同时输入) Ctrl+Enter                无论光标在哪个位置,都向下换行,与Enter有区别 链接分

    2024年02月10日
    浏览(98)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(54)
  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(76)
  • 【WebSocket】前端使用WebSocket实时通信

    最近写项目,需要实现消息通知和实时聊天的功能,就去了解了一些关于websocket的知识,总结如下。 WebSocket 是一种在 Web 应用中实现实时通信的协议。与传统的 HTTP 请求不同,WebSocket 连接在客户端和服务器之间建立一个 持久性 的 双向通信管道 ,使得数据可以在连接打开后

    2024年02月11日
    浏览(32)
  • Websocket、Session&Cookie、前端基础知识

    目录 1.Websocket Websocket与HTTP的介绍 不同使用场景 Websocket链接过程 2.SessionCookie Cookie的工作原理 Session的工作原理 区别 3.前端基础知识 HTTP: 1. HTTP 是单向的,客户端发送请求,服务器发送响应。每个 HTTP 或 HTTPS 请求每次都会新建与服务器的连接,并且在获得响应后,连接将自

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包