为什么需要 WebSocket协议？(1)

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

🌈什么是WebSocket？

==============================================================================

WebSocket是HTML5一种新的协议，WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术，是一种在单个TCP连接上进行全双工通讯协议。

全双工通讯协议的概念

全双工是通讯传输的一个术语。通信允许数据在两个方向上同时传输，他在能力上相当于两个单工通信方式的结合。全双工指可以同时进行信号的双向传输。

• 全双工：例如我们使用的手机就是全双工，在同一时刻两个用户可以同时给对方传送数据

• 半双工：例如我们使用的对讲机，当A方按住通话按钮才可以向B方传送数据，B方也是，在同一时刻只有一个用户能够传送数据（A/用户都可以传递信息，但是不能够同时传递）

• 单工：例如我们看电视时，我们只能接收对方发送的信息，不能够给对方传递信息；

UDP和TCP协议的概念

TCP是事先为所发送的数据开辟出连接好的通道，然后再进行数据发送；而UDP则不为IP提供可靠性、流控或差错恢复功能。一般来说，TCP对应的是可靠性要求高的应用，而UDP对应的则是可靠性要求低、传输经济的应用。

websocket应用场景？

1、社交订阅

2、多玩家游戏

3、协同编辑文档

4、数据流状态

5、多人聊天

🎉websocket有哪些特点？

================================================================================

• 与http协议有良好的兼容性；

• 建立在TCP协议之上，和http协议同属于应用层；

• 数据格式比较轻量，性能开销小，通信高效；

• 可以发送文本，也可以发送二进制；

• 没有同源限制，可以与任意服务器通信。

http和websocket的区别？

http协议是短链接，因为请求之后，都会关闭连接，下次请求需要重新打开链接。

websocket协议是一种长连接，只需要通过一次请求来初始化连接，然后所有请求和响应都是通过TCP链接进行通信。

websocket和socket的区别？

socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而websocket协议是一个完整的应用层协议，拥有一套完整的API。

💰WebSocket中的常用注解有哪些？

====================================================================================

@ServerEndpoint ：类似与servlet中的 RequestMapping

@OnOpen：类似与servlet中的 init（）初始化

@OnClose：类似与servlet中的destroy() 销毁

@OnMessage：类似于servlet中的service请求 （意思就是发送数据的方式 @doPost()/ @doGet() 组合）

🚀服务端实时通信有哪些方法？

==============================================================================

1、AJAX轮询

2、Long Polling长轮询

3、WebSocket

📖客户端的 API

=========================================================================

WebSocket 客户端的 API 如下。

WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

var ws = new WebSocket(‘ws://localhost:8080’);

执行上面语句之后，客户端就会与服务器进行连接。

实例对象的所有属性和方法清单，参见这里。

webSocket.readyState返回实例对象的当前状态

readyState属性返回实例对象的当前状态，共有四种。

• CONNECTING：值为0，表示正在连接。

• OPEN：值为1，表示连接成功，可以通信了。

• CLOSING：值为2，表示连接正在关闭。

• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

下面是一个示例。

switch (ws.readyState) {

case WebSocket.CONNECTING:

// do something

break;

case WebSocket.OPEN:

// do something

break;

case WebSocket.CLOSING:

// do something

break;

case WebSocket.CLOSED:

// do something

break;

default:

// this never happens

break;

}

webSocket.onopen连接成功后的回调函数

实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {

ws.send(‘Hello Server!’);

}

如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener(‘open’, function (event) {

ws.send(‘Hello Server!’);

});

webSocket.onclose连接关闭后的回调函数

实例对象的onclose属性，用于指定连接关闭后的回调函数。

ws.onclose = function(event) {

var code = event.code;

var reason = event.reason;

var wasClean = event.wasClean;

// handle close event

};

ws.addEventListener(“close”, function(event) {

var code = event.code;

var reason = event.reason;

var wasClean = event.wasClean;

// handle close event

});

webSocket.onmessage收到服务器数据后的回调函数

实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {

var data = event.data;

// 处理数据

};

ws.addEventListener(“message”, function(event) {

var data = event.data;

// 处理数据

});

注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

ws.onmessage = function(event){

if(typeof event.data === String) {

console.log(“Received data string”);

}

if(event.data instanceof ArrayBuffer){

var buffer = event.data;

console.log(“Received arraybuffer”);

}

}

除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

// 收到的是 blob 数据

ws.binaryType = “blob”;

ws.onmessage = function(e) {

console.log(e.data.size);

};

// 收到的是 ArrayBuffer 数据

ws.binaryType = “arraybuffer”;

ws.onmessage = function(e) {

console.log(e.data.byteLength);

};

webSocket.send()向服务器发送数据

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

569823904)]

[外链图片转存中…(img-wLpMMKW5-1712569823904)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-8G3fQ4jy-1712569823905)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。