资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端技术栈补全计划－－－websocket

前端技术栈补全计划－－－websocket

wzyplus / 1080人阅读

摘要：本系列文章旨在总结前端技术栈中的一些通用技术本文主要总结之前在之前，请求的主要模式是客户端发起请求，服务端负责接收，并返回数据。一种比较常见的方式是服务端携带参数，访问某个指定的前端页面，例如后端主动访问。协议是基于的一种新的网络协议。

本系列文章旨在总结前端技术栈中的一些通用技术
本文主要总结websocket

websocket 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);

这两种方法，总的来说都是妥协性实现，第一种方法对需要通过中间页面实现，不具备通用性。第二种方法则会浪费大量资源，给服务器带来不必要的压力。还有其他很多实现方法，不一一列举了。

WebSocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

关于网络协议的问题，本文不多讨论(因为笔者暂时也不懂,协议部分以后会放到别的文章里)。

WebSocket使用
与http

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可见官方文档）

attr
url ---string

WebSocket连接的目标地址

const ws = new WebSocket("ws://www.baidu.com");
ws.url       // "ws://www.baidu.com";
readyState --- number

readyState表示WebSocket当前的连接状态

constant state code description
CONNECTING 0 连接还没开启
OPEN 1 连接已开启并准备好通信
CLOSING 2 连接正在关闭过程中
CLOSED 3 连接已经关闭，活着无法建立
onopen ---function

当连接已开启时触发onopen事件

onmessage --- function

当从服务端收到消息时触发onmessage事件

onerror --- function

连接抛出错误时触发onerror事件

onclose --- function

连接关闭后触发onclose事件

method
send(message)

Websocket.send(message)
用于向服务端发送一条消息

close()

Websocket.close()
用于客户端主动关闭WebSocket通信

node端的WebSocketAPI此文不做介绍

暂时只做这么多介绍，更多详细内容和使用经验会会随着笔者不断学习应用逐步更新2333，希望大家共同进步
websocket-Mozila官方文档

云服务器 GPU云服务器 栈补全 前端实现websocket即时通信 技术前端 前端技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93441.html

相关文章

  • 阿里副总裁玄难：藏经阁计划首次在阿里应用落地

    摘要：在全国知识图谱与语义计算大会上，阿里巴巴集团副总裁藏经阁计划阿里负责人墙辉玄难宣布藏经阁计划首次在阿里应用落地，以及首次披露大规模知识构建技术细节，并从三个方面进行了解读。 2018年4月，阿里联合清华大学、浙江大学、中科院自动化所、中科院软件所、苏州大学等五家机构，联合发布藏经阁（知识引擎）研究计划，同时还宣布打算用一年时间初步建成首个开放的知识引擎服务平台，服务社会。 在全国知识图...

    CompileYouth 评论0 收藏0

  • 关于Subscribe Rancher Events的思考

    摘要：年月日社区技术支持计划全面启动，本文是研发人员在社区答疑过程中关于的一些心得和思考。初识基于的消息总线可以很好的与前端兼容，让消息的传递不再是后端的专利。 2016年2月14日「Rancher社区技术支持计划」全面启动，本文是Rancher研发人员在社区答疑过程中关于Subscribe Rancher Events的一些心得和思考。 引言 几乎每个大型的分布式的集群软件，都离不开一样东...

    yuxue 评论0 收藏0

  • 我的学习计划

    摘要：导语工作了之后发现，工作不是学习的结束，而是学习的开始，我们从校园里踏入社会，丢下了教科书，但是并不应该丢下学习的兴趣，学习是一件一生的事业，在学校内我们最应该拥有的三样东西培养学习的兴趣学习到专业知识养成良好的学习方法。 导语: 工作了之后发现，工作不是学习的结束，而是学习的开始，我们从校园里踏入社会，丢下了教科书，但是并不应该丢下学习的兴趣，学习是一件一生的事业，在学校内我们最应该...

    Object 评论0 收藏0

发表评论

登陆后可评论

0条评论

wzyplus

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<