学习浏览器中的JS-WebSocket发送接收消息

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

前言

上文简单学习了关于浏览器中的JS之 WebSocket(一), 本文继续来学习WebSocket通信二

通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:

WebSocket

WebSocket 用于创建和管理 WebSocket 连接，可以通过该连接发送和接收数据的 API

通过 WebSocket 不仅仅是服务器向客户端发送消息了, 而且消息可以 双向发送 支持 JavaScript 代码在浏览器中与服务器方便地交换文本和二进制消息.

WebSocket URL 则以 ws:// 开头. (要使用WebSocket, 浏览器通常也会闲置只能在安全的 https:// 连接加载的页面中使用)

使用 WebSocket 建立通信,发送数据

通过 WebSocket 向服务器发送消息, 可以调用 WebSocket 对象的send() 方法. send()方法接收一个消息参数(支持各种类型有没有):

1. 字符串
2. Blob
3. ArrayBuffer
4. 定型数组
5. DataView对象

send() 方法通过把要发送的消息保存在缓冲区, 并在实际要发送前返回. WebSocket 对象的 bufferedAmount属性保存着缓冲区暂未发送的字节数.

通过 WebSocket 接收消息

客户端/浏览器通过 WebSocket 从服务器接收消息, 通过注册 "message" 事件处理程序, 设置 WebSocket 对象的 onmessage 属性("监听消息"), 也可通过调用addEventListener().

与 "message" 关联的事件对象是MessageEvent的实例, 其 data属性包含服务器的消息(敲重点). 比如服务器发送的的是一个串utf-8 的文本, event.data就是保存该文本的字符串. 如果服务器发送的是二进制格式的消息, 则data表示的是该数据的Blob对象

相关更文阅读

1. JavaScript 学习理解-Number-这是一个函数

2. JS 学习理解-自动类型转换

3. JavaScript 中的中缀运算符

4. 你知道 JavaScript 的 typeof 是什么吗?

5. 学习 JavaScript 中几个代表性事件(Event)

6. 学习理解客户端 JavaScript-事件分类(一)

7. 理解浏览器中的 JavaScript-事件注册

8. 浏览器中的 JavaScript-fetch()网络请求方法

• 浏览器中的 js-通过 fetch()上传文件
• 浏览器-通过fetch学习指定请求方法和请求体

1. HTTP 响应代码
2. 浏览器中的JS-WebSocket通信(一)

Calm Down & Carry On!

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的过程! 加油!

参考内容

• WebSocket通信发送数据(概念) | MDN