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罗、托雷斯等球星也自然…

jsp后台批量导入excel表格数据到mysql中_PHP批量导入excell表格到mysql数据库

PHP批量导入excell表格到mysql数据库,本人通过亲自测试&#xff0c;在这里分享给大家1&#xff0c;下载 php excell类库网上搜索可以下载&#xff0c;这里不写地址2&#xff0c;建html文件请选择你要上传的EXCELL:excell下载模板请选择你要上传的excell:3,php代码写入//批量上…

鹅厂二面,Nginx回忆录

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

nagios监控mysql主机,nginx,cpu,网卡流量

nagios安装完成&#xff0c;打开/usr/local/nagios/etc/nagios.cfg去掉cfg_dir/usr/local/nagios/etc/servers前面的#号&#xff0c;并创建/usr/local/nagios/etc/servers目录&#xff08;此目录下放被监控机的配置文件&#xff09;&#xff0c;重启nagios服务service nagios r…

干货|吴恩达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…

Dotnet的数据定位和匹配

Dotnet里&#xff0c;数据定位和匹配的相关编程现在变得很舒服。最近项目紧&#xff0c;还要不停出差。所以&#xff0c;写个短点的、最近经常用到的内容&#xff1a;数据定位和匹配。数据定位假设我们有这样一个数组&#xff1a;var array new int[] { 1, 2, 3, 4, 5, 6, 7, …

一年后,我又来了

差不多一年没有更新过博客了&#xff0c;这一年&#xff0c;怀孕生子&#xff0c;人变懒惰了&#xff0c;不想思考。在家休假也大半年了&#xff0c;颓废&#xff0c;什么也没干。现在宝宝已经两个多月了&#xff0c;没多久也要上班了&#xff0c;生活也逐渐走上正轨&#xff0…

mysql怎么存照片信息_mysql怎么存储图片信息?

方法一&#xff1a;把照片放进数据库&#xff0c;照片的格式最好是bmp&#xff0c;这样就可以在窗体上显示出来&#xff0c;不过这样数据库的体积会暴增。详细的使用方法请参考Access帮助中的 PictureData 属性(本文末尾有相关帮助)。而且&#xff0c;你可以直接用 commdlg API…

使用 .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;现在已成为最流行的语言…

客官,.NETCore无代码侵入的模型验证了解下

.NETCore下的模型验证相信绝大部分的.NET开发者或多或少的都用过&#xff0c;微软官方提供的模型验证相关的类位于System.ComponentModel.DataAnnotations命令空间下&#xff0c;在使用的时候只需要给属性添加不同的特性即可实现对应的模型验证。如下所示&#xff1a;public cl…

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

这两周一直忙着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…