websocket文档_WebSocket推送 原理扫盲到上手实践

      关于服务端推送技术,大家比较熟悉的可能就是轮询,但是轮询只能是由客户端先发起http请求。在HTTP1.1中的keep-alive方式建立的http连接,但是一个Request只能对应一个Response,而且这个Response是被动的,不能主动发起。

      为了在IM、股票等场景下,真正解决服务端实时向客户端推送数据的问题,出现了基于TCP的长连接通讯协议websocket。

        websocket协议本身需要注意的一共有两点:

        1.为了兼容现有浏览器的握手规范而借用了HTTP的协议来完成一部分握手。

        2.websocket是纯事件驱动的,一旦连接建立,通过监听事件可以处理到来的数据和改变的连接状态,数据都以帧序列的形式传输。服务端发送数据后,消息和事件会异步到达。websocket编程遵循一个异步编程模型,只需要对websocket对象增加回调函数就可以监听事件。

       下面来具体介绍一下websocket的这两点特征,先介绍基于回调函数的事件编程:

异步编程模型

如果大家想切身体验一下websocket,可以自己下载现成demo。地址:https://github.com/sockjs/sockjs-node/tree/v0.3.19(注意:请通过download下载文件的方式下载代码,不要直接clone,不然代码版本不一样)。不过为了更好地实现浏览器兼容性,demo中是通过sockjs-node库来实现websocket协议的底层协议。更多的sockjs的api请进一步参考git网页中sockjs-node的文档。

      本次用来演示的是example文件夹中的koa项目,在代码中大家可以着重理解上面提到的websocket需要注意的第二点,在代码中,主要是通过事件回调函数的方式来实现对消息的处理的。

      在服务器代码中首先为sockjs_echo变量赋值了一个websocket连接实例,定义接收到消息后的回调函数,即把接收到的message进行回写。然后启动了一个koa服务器,当被访问的时候返回一个index.html文件,作为webSocket的客户端。最后通过installHandlers方法,在访问路由/echo的时候为koa服务器增加websocket连接的回调处理。

var koa     = require('koa');
var sockjs  = require('sockjs');
var http    = require('http');
var fs      = require('fs');
var path    = require('path');

// 1. Echo sockjs server
var sockjs_opts = {sockjs_url: "http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"};
var sockjs_echo = sockjs.createServer(sockjs_opts);
sockjs_echo.on('connection', function(conn) {
    conn.on('data', function(message) {
        conn.write(message);
    });
});

// 2. koa server
var app = new koa();

app.use(function *() {
    var filePath = __dirname + '/index.html';
    this.type = path.extname(filePath);
    this.body = fs.createReadStream(filePath);
});

var server = http.createServer(app.callback());
sockjs_echo.installHandlers(server, {prefix:'/echo'});

server.listen(9999, '0.0.0.0');
console.log(' [*] Listening on 0.0.0.0:9999' );

      而在客户端实现如下,通过sockjs库实例化websocket连接实例后,通过onopen、onmessage、onclose这些回调函数来实现消息的发送、接收、连接关闭处理:

var sockjs_url = '/echo';
var sockjs = new SockJS(sockjs_url);

sockjs.onopen  = function()  {print('[*] open', sockjs.protocol);};
sockjs.onmessage = function(e) {print('[.] message', e.data);};
sockjs.onclose   = function()  {print('[*] close');};

form.submit(function() {
    print('[ ] sending', inp.val());
    sockjs.send(inp.val());
    inp.val('');
    return false;
});

借用HTTP协议完成握手

       启动koa服务后,我们访问http://0.0.0.0:9999/打开页面,可以在浏览器network选项卡中观察到连接的建立过程。在request的header中通过"Connection:Upgrade;Upgrade:websocket"字段表示浏览器通知服务器,如果可以,就升级到websocket协议。response中同样通过"Connection:Upgrade;Upgrade:websocket"来通知浏览器,服务端已经成功切换协议,返回状态码为101。

babcf9206f36272b84fde689b7730137.png

      我们此时可以试着在网页中输入一些内容来通过websocket来发送,还是在浏览器的Network选项卡中可以看到我们发送的消息和服务端回写回来的消息:

06fcd379d916c0e5bca896172289d5b8.png

      目前我们已经看到了一个简单的websocket实现,但是在websocket中传输的内容是不是还可以更加丰富一些,比如像http协议一样,添加上各种header字段来让我们实现出一些更加规范的语义协议?可以的。stomp协议就是这样的一个语义协议,可以在websocket的基础之上,通过stomp协议来更加规范地传输消息。

官方文档:http://jmesnil.net/stomp-websocket/doc/

翻译文档:https://blog.csdn.net/quanyuejie/article/details/53896140

      使用了stomp协议在websocket基础上传输消息的效果如下,我们可以看到在websocket的消息中,一个消息可以看作一个frame,每个frame中有自己的command和headers、body。比如在连接帧中发送了"CONNECT"的命令,后面accept-version作为headers来定义版本号,heart-beat来定义心跳等等这些功能,都可以看作是通过stomp协议来实现的:

2ca3dfd69c24ad015b9a3fe9a85985da.png

参考:

JS 服务器推送技术 WebSocket 入门指北  公众号:前端下午茶

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DISCUZ7.2在通达OA2009桌面显示技巧

最近在测试DISCUZ 和通达...猛然间看到,,,可以DISCUZ可以和通达完美结合,禁不住进行了测试.....效果还挺好的...最初效果图如下:感觉挺别扭的,于是将DISCUZ调用代码更改了代码如下:[show1] <table width"100%" > <tr> <td alignleft> <di…

如何在 ASP.Net Core 中使用 Lamar

ASP.Net Core 自带了一个极简的 开箱即用 的依赖注入容器&#xff0c;实际上&#xff0c;你还可以使用第三方的 依赖注入容器 来替代它&#xff0c;依赖注入是一种设计模式&#xff0c;它能够有效的实现对象之间的解耦并有利于提高单元测试和维护性&#xff0c;你可以使用 依赖…

扎克伯格做了26张PPT,员工效率提10倍,已被疯狂传阅!

1、时间常有&#xff0c;时间在于优先。2、时间总会有的&#xff1a;每天只计划 4&#xff5e;5 小时真正的工作。3、当你在状态时&#xff0c;就多干点&#xff1b;不然就好好休息&#xff1a;有时候会连着几天不是工作状态&#xff0c;有时在工作状态时却又能天天忙活 12 小时…

2010南非世界杯32强手绘海报

2010南非世界杯32强手绘海报 2010年南非世界杯已经进入最后的倒计时&#xff0c;近日&#xff0c;ESPN推出了一组以世界杯32强为主题的手绘海报。在这组颇有漫画性质的海报中&#xff0c;32强每支球队的特点都是展现得淋淋尽致&#xff0c;卡卡、梅西、C罗、托雷斯等球星也自然…

鹅厂二面,Nginx回忆录

上周二面鹅厂&#xff0c;面试官问出了“nginx你了解吗&#xff1f;”这样宽泛直白的句式&#xff0c;我一时抓不到重点&#xff0c;一时语噻。下班想了一下&#xff0c;平时潜移默化用到不少nginx的能力&#xff0c;但在面试的时候没有吹成对应的概念。面谈nginx核心能力nginx…

干货|吴恩达Coursera课程教你学习神经网络二!

上一周的课程中讲了神经网络的结构以及正向传播(feed forward)过程&#xff0c;了解了神经网络是如何进行预测的&#xff0c;但是预测的结果怎么和真是结果进行比较以及发现了错误如何修改还没有提及。这一周的课程中&#xff0c;介绍了cost function作为结果比较的标准以及bac…

vue预加载动态生成runtime.js_预渲染 prerender-spa-plugin 避坑指南

预渲染原理在webpack打包结束并生成文件后&#xff08;after-emit hook&#xff09;&#xff0c;会启动一个server模拟网站的运行&#xff0c;用puppeteer&#xff08;google官方的headless 无头浏览器浏览器&#xff09;访问指定的页面route&#xff0c;得到相应的html结构&am…

使用 .NET CLI 构建项目脚手架

前言在微服务场景中&#xff0c;开发人员分配到不同的小组&#xff0c;系统会拆分为很多个微服务&#xff0c;有一点是&#xff0c;每个项目都需要单元测试&#xff0c;接口文档&#xff0c;WebAPI接口等&#xff0c;创建新项目这些都是重复的工作&#xff0c;而且还要保证各个…

.net 垃圾回收机制

尽管在.NET framework下我们并不需要担心内存管理和垃圾回收(Garbage Collection)&#xff0c;但是我们还是应该了解它们&#xff0c;以优化我们的应用程序。同时&#xff0c;还需要具备一些基础的内存管理工作机制的知识&#xff0c;这样能够有助于解释我们日常程序编写中的变…

《自然》杂志:中国人越来越沉迷于对着一个叫“区块链”的东西胡言乱语

起初&#xff0c;《自然》杂志以为在2018年春节前后中国发生了一场瘟疫&#xff0c;但很快就改变了这一看法。除了精神亢奋无法入睡&#xff0c;那里的人们身体还算健康。不过&#xff0c;他们越来越沉迷于对着一个叫“区块链”的东西胡言乱语&#xff0c;根本停不下来。因为教…

python if 跳出_Python保留字简单释义

作者&#xff1a;小小程序员链接&#xff1a;https://zhuanlan.zhihu.com/p/87393696来源&#xff1a;知乎著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。Guido van Rossum在1991年正式对外发布Python版本&#xff0c;现在已成为最流行的语言…

敏捷个人:提供更多文档下载,并转载一篇敏捷个人读书笔记

这两周一直忙着OpenExpressApp的自动化测试支持了&#xff0c;对于敏捷个人最近在思考作为新手如何学习的问题&#xff0c;后期我会写篇blog与大家分享一下。在敏捷个人项目中我发布了敏捷个人&#xff0d;认识自我&#xff0c;管理自我.pdf&#xff0c;有很多朋友之前看过&…

大数据揭秘:低学历者发财的概率有多大?结果很吃惊

先看两幅图&#xff1a;Table 1: Mean Earnings by Highest Degree Earned, $: 2009 (SAUS, table 232)Table 2: Unemployment Rates by Educational Attainment图一是美国社会收入和最高学历的关系&#xff0c;图二是美国社会失业率和受教育程度的关系&#xff0c;数据来自SAU…

Win10 Terminal + WSL 2 安装配置指南

自从 Windows Terminal 正式发布后就再没有用过 Windows 系统自带的终端了。主要是 Terminal 简洁且灵活&#xff0c;更重要的是支持特殊字体&#xff0c;通过一些简单的配置可以使得终端看起来更舒适养眼。自从 Win 10 有了 Linux 子系统&#xff08;WSL&#xff09;&#xff…

如何快速解剖数据背后隐藏的信息

1946年2月16日&#xff0c;是一个值得纪念的日子。在这一天&#xff0c;人类历史上真正意义上的第一台电子计算机诞生了&#xff0c;此后计算机便随着科技的发展以强大的生命力飞速发展着。而作为用来定义计算机程序的形式语言——编程语言也紧跟计算机其后蓬勃发展&#xff0c…

来,Consul 服务发现入个门(一看就会的那种)

前言在微服务架构中&#xff0c;对于一个系统&#xff0c;会划分出多个微服务&#xff0c;而且都是独立开发、独立部署&#xff0c;最后聚合在一起形成一个系统提供服务。当服务数量增多时&#xff0c;这些小服务怎么管理&#xff1f;调用方又怎么能确定服务的IP和端口&#xf…

mysql数据库的安装和配置文件_MySQL 数据库安装与配置详解

目录一、概述MySQL 版本&#xff1a;5.7.17客户端工具&#xff1a;NavicatforMySQL** 二、MySQL 安装**安装条件&#xff1a;如果 Windows Server 2003 在安装.net framework4.0 安装过程中报错&#xff1a; net framework 4.0 安装时提示产生阻滞问题:运行安装程序前&#xff…

Magicodes.IE Excel合并行数据导入教程

说明Magicodes.IE.Excel目前已支持合并行单元格导入&#xff0c;如本篇教程所示。安装包Magicodes.IE.ExcelInstall-PackageMagicodes.IE.Excel添加Dto参考示例代码如下所示&#xff1a;public class MergeRowsImportDto {[ImporterHeader(Name "学号")]public long…

D轮融资1亿美金,6亿美金估值,3位计算机学霸如何带领海归团队创造业内神话?!

顺为资本在创始合伙人雷军及许达来的带领下成功领投了51Talk、丁香园、爱奇艺、一起作业等超级公司有近20家公司估值超过10亿美元如今顺为资本为何愿意投资这家公司&#xff1f;酷家乐6年破6亿美金的公司估值17年全年营收超3亿有着设计师300万这家以家居云设计为核心的创业公司…