学习浏览器中的JS-WebSocket通信(一)

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

前言

通过前几篇文章我们学习记录了浏览器中的 JavaScript, 另有更文其他 各知识点小结的相关阅读: list:

上文入门学习了 fetch 网络请求方法, 本文继续来学习 关于浏览器中的JS: WebSocket

了解 WebSocket

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API, 这个API 是一个复杂强大的网络协议对外暴露的简单接口.

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

我们熟悉的 URL 通常以 http/https://开头, 而 WebSocket URL 则以 ws:// 开头. (要使用WebSocket, 浏览器通常也会选择只能在安全的 https:// 连接加载的页面中使用)

使用 WebSocket

通过new一个, WebSocket() 构造函数来构造一个 WebSocket。构造函数: WebSocket(url[, protocols]) 返回一个 WebSocket 对象。

参数url 指定表示服务器的 URL,

// 还是这个 8080. 太熟悉了
let socket = new WebSocket('ws://localhost:8080/testws');

创建 WebSocket 时, 连接过程会自动开始, 但是新创建的 WebSocket 在第一次返回时并不会建立连接.

// 打开 连接
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 监听动态 数据
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

WebSocket 连接状态

• WebSocket.CONNECTING 值为 0, 表示 WebSocket正在连接
• WebSocket.OPEN 值为 1, 表示 WebSocket 已经连接, 可以通信了
• WebSocket.CLOSING 值为 2, 表示 WebSocket正在关闭
• WebSocket.CLOSED 值为 3, 表示这时候 WebSocket 已经关闭了, 不能再通信了. 在第一次初始化失败时也是这个状态.

相关更文阅读

1. JavaScript 学习理解-Number-这是一个函数
2. JS 学习理解-自动类型转换
3. JavaScript 中的中缀运算符
4. 你知道 JavaScript 的 typeof 是什么吗?
5. 学习 JavaScript 中几个代表性事件(Event)
6. 学习理解客户端 JavaScript-事件分类(一)
7. 理解浏览器中的 JavaScript-事件注册
8. 浏览器中的 JavaScript-fetch()网络请求方法
9. HTTP 响应代码
10. 浏览器中的 js-通过 fetch()上传文件
11. 浏览器-通过fetch学习指定请求方法和请求体

Calm Down & Carry On!

Buy Less by Know More!

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

参考内容

• 浏览器-WebSocket 请求方法和请求体 | MDN