摘要：本系列文章旨在总结前端技术栈中的一些通用技术本文主要总结之前在之前，请求的主要模式是客户端发起请求，服务端负责接收，并返回数据。一种比较常见的方式是服务端携带参数，访问某个指定的前端页面，例如后端主动访问。协议是基于的一种新的网络协议。
本系列文章旨在总结前端技术栈中的一些通用技术
本文主要总结websocket
在WebSocket之前，http请求的主要模式是客户端发起请求，服务端负责接收，并返回数据。如果需要服务端将一些参数主动传递至客户端，下面是一些常见的方法。
一种比较常见的方式是服务端携带参数，访问某个指定的前端页面，例如后端主动访问http://www.params.com?want=param1;。params页面被访问时接收到了want＝param1这个参数，其含义为，服务端想从客户端拿到param1这个字段的数据。前端就会发出对应http请求来满足服务端的需求
另一种更加常见的方式就是轮询(polling)，其本质就是利用定时器，不断像服务端发送请求，直到获得想要的数据
const polling ＝ setInterval(() => {
// 像服务器发出请求
http.(url, options)
.then((data) => {
if () {
// 没有新消息，继续轮询
...
} else {
// 拿到新消息，推出轮询
...
polling.clearInterval();
}
});
}, 500);
这两种方法，总的来说都是妥协性实现，第一种方法对需要通过中间页面实现，不具备通用性。第二种方法则会浪费大量资源，给服务器带来不必要的压力。还有其他很多实现方法，不一一列举了。
WebSocketWebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
关于网络协议的问题，本文不多讨论(因为笔者暂时也不懂,协议部分以后会放到别的文章里)。
WebSocket使用WebSocket的url与http最大的不同就是协议不同
http的协议是
http://(未加密）和https://（加密）
WebSocket的协议是
ws://（未加密）和 wss://（加密）
本文只以最简单的node服务端为例。
新建文件夹wsTest
// node端 ws依赖 npm install ws --save
// wsTest/server.js
const PORT = 3000;
const WebSocketServer = require("ws").Server;
const wss = new WebSocketServer({port: PORT});
wss.on("connection", function (ws) {
console.log("client connected");
wss.send("websocket connect success");
wss.on("message", function(evt) {
console.log(evt);
}
wss.on("error", function(evt) {
console.log(evt);
}
wss.on("close", function(evt) {
console.log(evt);
}
});
console.log(`server start ${PORT}`);
回到命令行，输入指令node server.js就可以启动服务器了
// index.html // 本文件与服务端无关，不需要配置
直接运行index.html，在控制台network中可以看到对应的WebSocket连接
WebSocket attr & method（前端）(本文仅列举一些前端WebSocket常用attr，全部api可见官方文档）
attrWebSocket连接的目标地址
const ws = new WebSocket("ws://www.baidu.com");
ws.url // "ws://www.baidu.com";
readyState表示WebSocket当前的连接状态
| constant | state code | description | |
|---|---|---|---|
| CONNECTING | 0 | 连接还没开启 | |
| OPEN | 1 | 连接已开启并准备好通信 | |
| CLOSING | 2 | 连接正在关闭过程中 | |
| CLOSED | 3 | 连接已经关闭，活着无法建立 |
当连接已开启时触发onopen事件
当从服务端收到消息时触发onmessage事件
连接抛出错误时触发onerror事件
连接关闭后触发onclose事件
methodWebsocket.send(message)
用于向服务端发送一条消息
Websocket.close()
用于客户端主动关闭WebSocket通信
暂时只做这么多介绍，更多详细内容和使用经验会会随着笔者不断学习应用逐步更新2333，希望大家共同进步
websocket-Mozila官方文档
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93441.html
摘要：在全国知识图谱与语义计算大会上，阿里巴巴集团副总裁藏经阁计划阿里负责人墙辉玄难宣布藏经阁计划首次在阿里应用落地，以及首次披露大规模知识构建技术细节，并从三个方面进行了解读。 2018年4月，阿里联合清华大学、浙江大学、中科院自动化所、中科院软件所、苏州大学等五家机构，联合发布藏经阁（知识引擎）研究计划，同时还宣布打算用一年时间初步建成首个开放的知识引擎服务平台，服务社会。 在全国知识图...
摘要：年月日社区技术支持计划全面启动，本文是研发人员在社区答疑过程中关于的一些心得和思考。初识基于的消息总线可以很好的与前端兼容，让消息的传递不再是后端的专利。 2016年2月14日「Rancher社区技术支持计划」全面启动，本文是Rancher研发人员在社区答疑过程中关于Subscribe Rancher Events的一些心得和思考。 引言 几乎每个大型的分布式的集群软件，都离不开一样东...
阅读 2101·2021-09-28 09:36
阅读 1548·2021-09-22 15:14
阅读 3447·2019-08-30 12:47
阅读 2843·2019-08-30 12:44
阅读 1017·2019-08-29 17:06
阅读 440·2019-08-29 14:12
阅读 856·2019-08-29 14:01
阅读 2461·2019-08-29 12:17
