JavaScript(JS) WebsSocket的简介及使用-CJavaPy

1、WebsSocket 简介

WebSocket是HTML5规范提出的一种协议，HTML5 Web Sockets规范定义了Web Sockets API，支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道，通过一个单一的套接字在Web上进行操作。其中ws://和wss://相当于http和https关系差不多，它可以在用户的浏览器和服务器之间打开交互式通信会话。可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

2、WebsSocket、Socket和HTTP的区别

Socket是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口，提供一套调用TCP/IP协议的API。WebsSocket同HTTP一样也是应用层的协议，但它是一种双向通信协议，是建立在TCP之上的，解决了服务器与客户端全双工通信的问题，握手成功后，数据就直接从 TCP 通道传输，数据传输就与HTTP协议无关，HTTP用在握手阶段。另外，WebSocket是双向通信协议，模拟Socket，可以双向发送或接受信息。HTTP是单向的。

单工、半双工、全工通信：

数据只能单向传送为单工；

数据能双向传送但不能同时双向传送称为半双工；

数据能够同时双向传送则称为全双工。

3、WebSocket 浏览器端的使用

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。如下，

// 创建 WebSocket 连接.
const socket = new WebSocket('ws://localhost:8080');

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

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

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket