首页 前端知识 2024年Html5 中的 WebSocket通信_html5 websocket 通信,2024年最新面试须知哪些内容

2024年Html5 中的 WebSocket通信_html5 websocket 通信,2024年最新面试须知哪些内容

2024-06-04 10:06:06 前端知识 前端哥 120 537 我要收藏

文末

逆水行舟不进则退,所以大家要有危机意识。

同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即使服务带来了两大好处:

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器可以主动传送数据给客户端,只要客户端打开的socket与服务器建立连接后,就可以把数据推送到这个socket上,从被动转为主动。

WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。

2、HTML5 WebSockets API

WebSocket对象

WebSocket在DOM中是window对象的子对象,它具有:

  • WebSocket(url)构造函数。
  • readyState。只读属性,其值可以是CONNECTING(0),OPEN(1),CLOSED(3)。
  • boolean send(in DOMString data)
  • void close()两个方法,分别用于发送消息和关闭WebSocket连接

onopen, onmessage, 和onclosee三个事件属性,分别对open, message和close三个WebSocket事件。

1、浏览器支持情况检测

检测浏览器支持情况

function loadDemo() {  
    if (window.WebSocket) {  
        //supported 
    } else {  
        // not supported 
    }  
}

2、WebSocket对象的创建和服务器连接

要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

url = "ws://localhost:8080/echo"; 
w = new WebSocket(url);

建立WebSocket连接时,可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组。

w = new WebSocket(url, ["proto1", "proto2"]);

假设proto1和proto2是定义明确、可能已注册且标准化的协议名称,它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。

onopen = function(e) {  
    //确定服务器选择的协议 
    log(e.target.protocol);  
}

3、添加事件监听器

WebSocket编程遵循异步编程模型;打开socket后,只需等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件:open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误,如以下示例所示。

w.onopen = function() { 
    log("open");  
    w.send("send message");  
}  
w.onmessage = function(e) { 
    log(e.data);  
}  
w.onclose = function(e) { 
    log("closed");  
}  
w.onerror = function(e) { 
    log("error");  
}

4、发送消息

当socket处于打开状态(即onopen之后,onclose之前),可以用send方法来发送消息。消息发送完,可以调用close方法来终止连接,也可以不这么做,让其保持打开状态。

w.send();

你可能想测算在调用Send()函数之前,有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。

document.getElementById("sendButton").onclick = function() {  
    if (w.bufferedAmount < bufferThreshold) {  
        w.send(document.getElementById("inputMessage").value); 
    }  
}

WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例

var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);  
w.send(a.buffer);

常量-readyState属性

这些常量是readyState属性的取值,可以用来描述WebSocket连接的状态。

| Constant | Value | Description |

最后

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-V3ObKWhp-1715342544312)]

[外链图片转存中…(img-18YbKK7D-1715342544313)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10744.html
标签
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!