websocket 初识

1、概念

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

WebSocket_百度百科

HTML5 WebSocket | 菜鸟教程

2、插件

Socket.IO

需要服务端与前端配套使用,有文档学习成本。

3、自定义封装 有助理解

https://juejin.cn/post/7371365854012276747?searchId=2024062617355574E747E0443CF55D7CAF

4、应用场景

  1. 4.1即时通信:WebSocket 可以实现客户端和服务器之间的全双工通信,适用于需要实时交互的应用,如聊天室、在线游戏等。

  2. 4.2实时数据流:WebSocket 可以用于服务器端向客户端推送数据流,比如股票价格变化、体育赛事结果更新等。

  3. 4.3服务器推送技术:WebSocket 提供了一种替代传统服务器推送技术(如 AJAX 长轮询、Comet)的方法,能更高效地利用网络资源。

相关推荐
我命由我1234521 小时前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
酉鬼女又兒2 天前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
我命由我123452 天前
Element Plus - Cascader 观察记录(基本使用、动态加载、动态加载下的异常环境)
开发语言·前端·javascript·vue.js·typescript·html5·js
我命由我123452 天前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
狂奔蜗牛飙车3 天前
Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img
前端·html·html5·html常用标签的使用方法
默默学前端4 天前
HTML 高频面试题 5 道|吃透基础,面试不慌(附详细解析)
前端·面试·职场和发展·html5
我命由我123454 天前
Vue Router - 记录一下 2 种路由写法
前端·javascript·vue.js·前端框架·html·html5·js
yuguo.im5 天前
91 行代码实现一个打飞机游戏(HTML5 Canvas 版)
前端·游戏·html5·打飞机
我命由我123455 天前
React - state、state 的简写方式、props、props 的简写方式、类式组件中的构造器与 props、函数式组件使用 props
前端·javascript·react.js·前端框架·html·html5·js
我命由我123456 天前
React - React 初识、创建虚拟 DOM 的两种方式、jsx 语法规则、React 定义组件
前端·javascript·react.js·前端框架·html·html5·js