原文:https://www.jianshu.com/p/8f956cd4d42b

angular-cli启动的项目也可以自动刷新,底下应该也是应用的websocket的原理。

----------------------------------------------------------------------

Weex实时更新页面的原理--WebSocket

ladder_builder 关注

2017.03.07 16:49* 字数 603 阅读 2112评论 0喜欢 3

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用。
在上一篇Weex环境搭建与体验最后提到,当修改服务端修改js文件后,手机端的界面自动就会更新,那这到底是如何实现的呢?通过分析WeexPlayGround的源码,发现其中HotRefreshManager类负责检查服务端的js文件有没有更新,如果有更新便会重新加载js文件,从而实现了实时更新。其中HotRefreshManager内部是使用WebSocket实现的。
下面我们来介绍一下WebSocket的相关概念。

WebSocket

WebSocket是一种全双工的计算机通信协议,它建立在TCP的基础之上。它可以在服务器与浏览器之间建立一个长连接,然后进行实时的数据传输。而我们比较熟悉的HTTP,它一般也是建立在TCP之上的,不同的是,它不是全双工的,而是请求-相应式的,每次通信都需要发起新的请求,而且每次发起请求,都需要重新建立连接。

WebSocket与HTTP的关系

WebSocket和HTTP其实是有关系的,我们可以从OkHttp的源码中看到WebSocket的具体实现。
OkHttp的WebSocketCall类中,有下面的代码。

request = request.newBuilder()
.url(httpUrl)
.header("Upgrade", "websocket")
.header("Connection", "Upgrade")
.header("Sec-WebSocket-Key", key)
.header("Sec-WebSocket-Version", "13")
.build();

WebSocket连接的建立利用了HTTP,只不过在HTTP请求的Header中添加了一些特殊的参数,用来标识这是一个WebSocket请求。服务端收到请求后,如果它支持WebSocket,则在Response的Header中添加相应的字段告诉客户端。当客户端收到响应后,做了什么呢?我们继续看代码。

 Connection connection = Internal.instance.callEngineGetConnection(call);
// TODO if (!connection.clearOwner()) {
if (!Internal.instance.clearOwner(connection)) {
throw new IllegalStateException("Unable to take ownership of connection.");
} Socket socket = connection.getSocket();
BufferedSource source = Okio.buffer(Okio.source(socket));
BufferedSink sink = Okio.buffer(Okio.sink(socket)); final RealWebSocket webSocket =
ConnectionWebSocket.create(response, connection, source, sink, random, listener); // Start a dedicated thread for reading the web socket.
new Thread(new NamedRunnable("OkHttp WebSocket reader %s", request.urlString()) {
@Override protected void execute() {
while (webSocket.readMessage()) {
}
}
}).start(); // TODO connection.setOwner(webSocket);
Internal.instance.connectionSetOwner(connection, webSocket); listener.onOpen(webSocket, request, response);

上面的过程可以总结如下:

  1. 首先通过callEngineGetConnection函数,获得这个HTTP底层的TCP连接。
  2. 然后调用clearOwner清除掉该连接原来的拥有者。
  3. 接下来使用该连接的Socket和输入输出,创建真正的WebSocket。
  4. 最后将该连接的拥有者设为该WebSocket。

从上面的过程可以看出,WebSocket的原理,就是先使用HTTP协议建立连接,然后使用底层的TCP连接继续通信。

web页面实时更新页面的原理--WebSocket的更多相关文章

  1. 基于node的前端页面实时更新。呦吼~

    学习了gulp,webpack后越发觉得前端开发万分的有趣,首当其冲的就是解决了狂按f5的尴尬. 当我们按下ctrl+s保存后页面自动更新了,我就觉得我f5键在隐隐的发笑. 1.node_npm_li ...

  2. echarts3.0 实例容器不实时更新页面的问题

    var instanceId = document.getElementById(option.echartId).getAttribute('_echarts3_instance_'); if (i ...

  3. 基于HTTP协议之WEB消息实时推送技术原理及实现

    很早就想写一些关于网页消息实时推送技术方面的文章,但是由于最近实在忙,没有时间去写文章.本文主要讲解基于 HTTP1.1 协议的 WEB 推送的技术原理及实现.本人曾经在工作的时候也有做过一些用到网页 ...

  4. sphinx增量索引和主索引来实现索引的实时更新

    项目中文章的信息内容因为持续有新增,而文章总量的基数又比较大,所以做搜索的时候,用了主索引+增量索引这种方式来实现索引的实时更新. 实现原理: 1. 新建一张表,记录一下上一次已经创建好索引的最后一条 ...

  5. websocket实现数据库更新时前端页面实时刷新

    websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...

  6. WebSocket 实时更新mysql数据到页面

    使用websocket的初衷是,要实时更新mysql中的报警信息到web页面显示 没怎么碰过web,代码写的是真烂,不过也算是功能实现了,放在这里也是鞭策自己,web也要多下些功夫 准备 引入依赖 & ...

  7. IDEA 修改JSP和后端数据后,页面刷新可以实时更新

    情况:刚开始使用IDEA进行开发时,发现修改JSP页面或者后端数据后,再刷新浏览器页面,发现没有变化,页面无更新. 这样就导致不得不频繁重启tomcat服务器.非常麻烦 解决方法: 步骤1. 先设置t ...

  8. Django websocket之web端实时查看日志实践案例

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...

  9. Web网站数据”实时”更新设计

    请注意这个实时打上了双引号,没有绝对的实时,只是时间的颗粒不一样罢了(1ms,1s,1m). 服务器数据有更新可以快速通知客户端.Web 基于取得模式,而服务器建立大量的和客户端连接来提供数据实时更新 ...

随机推荐

  1. PHP实现RESTful风格的API实例

    原生方式实现,直接撸代码 Request.php :包含一个Request类,即数据操作类.接收到URL的数据后,根据请求URL的方式(GET|POST|PUT|PATCH|DELETE)对数据进行相 ...

  2. 创建 OpenStack云主机 (十五)

    创建过程 创建虚拟网络 创建m1.nano规格的主机(相等于定义虚拟机的硬件配置) 生成一个密钥对(openstack的原理是不使用密码连接,而是使用密钥对进行连接) 增加安全组规则(用iptable ...

  3. SocketCluster

    官网地址:https://socketcluster.io/ SocketCluster的组成部分,即运行一个SocketCluster服务器,它在服务器生成的进程 1.主进程(Server.js)一 ...

  4. python版GetTickCount()

    time.clock() return the current processor time as a floating point number expressed in seconds. 即返回一 ...

  5. Java网络编程一

    1.InetAddress的应用 import java.util.List; import java.math.BigDecimal; import java.net.InetAddress; im ...

  6. 在CentOS6或RHEL6恢复上ext4文件系统误删除的文件

    首先说明: [root@CentOS6 ~]# rm -rf / //这条命令不可以执行 [root@CentOS6 ~]# rm -rf /* //这条命令可以执行,别去试 ext4文件系统上误删除 ...

  7. CentOS中Ctrl+Z、Ctrl+C、Ctrl+D的区别

    Ctrl+C和Ctrl+Z都是中断命令,但作用不同. Ctrl+C是发送SIGINT信号,终止一个进程. Ctrl+Z是发送SIGSTOP信号,挂起一个进程,将作业放置到后台(暂停状态).与此同时,可 ...

  8. [BZOJ 1724] Fence Repair

    这大概是BZOJ里除了A+B Problem最水的一道题了吧 题面:http://www.lydsy.com/JudgeOnline/problem.php?id=1724 这道题其实有一些思路还是可 ...

  9. 【构造】【分类讨论】Codeforces Round #435 (Div. 2) C. Mahmoud and Ehab and the xor

    题意:给你n,x,均不超过10^5,让你构造一个无重复元素的n个元素的非负整数集合(每个元素不超过10^6),使得它们的Xor和恰好为x. 如果x不为0: 随便在x里面找一个非零位,然后固定该位为0, ...

  10. [JZOJ5425]数论

    题目大意: 给你$n,m$,求$\displaystyle{\sum_{i=1}^{n}\sum_{j=1}^{m}}\min(\lfloor\frac{n}{i}\rfloor,\lfloor\fr ...