前端实现WebSocket即时通讯

本文介绍了WebSocket协议的特性,包括双向通信、TCP基础、无同源限制及状态保持。阐述了客户端如何使用WebSocket对象进行连接、监听状态变化,并讨论了WebSocket的重连机制,以应对可能的连接断开情况。此外,还简要说明了如何用Node.js搭建WebSocket服务器,包括安装环境、创建项目、安装依赖和编写服务器代码。
摘要由CSDN通过智能技术生成

要实现客户端与服务器端的通信,最常接触的是http(https)协议,http通信只能是客户端发起请求,服务器响应。服务器不能主动向客户端传递消息。
HTTP 协议无法做到服务器主动向客户端推送信息,2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话,即:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

  • WebSocket 协议的底层协议也是TCP协议
  • WebSocket 协议的标识符为ws,加密后为wss
  • WebSocket 协议没有同源限制,即WebSocket 协议可以跨域通信
  • WebSocket 协议是有状态的,是前后端交互的长连接,即建立连接后可以保持连接状态,通信时可以省略部分状态信息
  • WebSocket 协议可以发送文本,也可以发送二进制数据

客户端实现

客户端可以通过WebSocket 构造函数创建WebSocket 对象创建和管理 WebSocket 连接,并通过该连接发送和接收数据的 API。
在这里插入图片描述

属性

说明

readyState

当前 WebSocket 的链接状态 , 0:正在链接中 1:已经链接并且可以通讯 2:连接正在关闭 3;连接已关闭或者没有链接成功

onopen

连接成功后的回调

onerror

连接失败后的回调

onmessage

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值