单页应用的挑战之一是确保客户端软件和服务器应用相匹配。

举例：如果一个用Bobbie在他的浏览器中加载我们的单页应用，五分钟之后我们更新了服务器应用。现在Bobbiede遇到了问题，因为我们对服务器做了更新后，用的是一种新的数据格式，而Bobbie的单页应用仍然需要旧的数据类型。

解决这种情况的一种方法是：在意识到数据格式过时的时候，强制Bobbie重新加载整个单页应用（比如说之后向她发送服务器更新的消息通知）

但我们能够做得更加漂亮：可以选择性地只更新单页应用中发生变化的javaScript文件。

不用强制重新加载整个应用

那么如何做到这种神奇的更新呢？有三个问题需要考虑

　　（1）监听javaScript文件，能够检查到对他们的修改　　

　　（2）通知客户端文件已经被更新

　　（3）当客户端收到变化通知时，更新客户端的javaScript文件

第一个问题，能够检测到文件的修改，可以使用元素node文件系统模块fs来完成这个功能

第二个想浏览器发送Socket.IO通知

第三个更新客户端文件的问题。可以在接收到通知的时候，通过插入一个新的Script标签来完成

使用Socket.IO做单页SPA应用更新的更多相关文章

  1. vue单页(spa)前端git工程拆分实践

    背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...

  2. 用原生js做单页应用

    最近在公司接到一个需求,里面有一个三级跳转.类似于选择地址的时候,选择的顺序是:省份->市->区.如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦.所以可以用 ...

  3. 使用nodejs引用socket.io做聊天室

    Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...

  4. 关于单页应用（SPA）的经验之谈

    时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革.笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法. 对于单页应用,笔者没有找到最官方的定义.在笔者看来,在 ...

  5. simple-spa 一个简单的单页应用实例

    上两篇文章说过要写一个简单的单页应用例子的, 迟迟没有兑诺, 实在有愧 哈哈.这篇写给小白用户哈. 正好趁今天风和日丽,事情不多, 把从项目里的代码扣取了一下, 整理了一个简单的例子.因为我们生产项目 ...

  6. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  7. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  8. 移动Web单页应用开发实践——实现Pull to Request（上/下拉请求操作）

    在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...

  9. vue + socket.io实现一个简易聊天室

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...

随机推荐

  1. three.js低版本添加文字(如71版本)

    研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...

  2. vue中使用axios进行http通信

    1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...

  3. Hive学内置条件和字符串函数

    https://blog.csdn.net/skywalker_only/article/details/38752003 条件函数 下表为Hive支持的一些条件函数. 返回类型 函数名 描述 T i ...

  4. Spring AOP 总结

    AOP的基础是Java动态代理 Java中代理的实现一般分为三种:JDK静态代理.JDK动态代理以及CGLIB动态代理. 静态代理: 代理类与被代理类实现同一个接口,在代理类中持有一个被代理对象的引用 ...

  5. Delphi 常用API 函数列表

    Delphi 常用API 函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小AnyPopup 判断屏幕上是否存在任何弹出式窗口ArrangeIconicWi ...

  6. CF232E Quick Tortoise ， Fzoj 3118

    这一题由于数据较多,我们考虑离线处理. 分治.对于两个点s,t,如果起点在mid这条横线上方,终点在下方,那么它必定会穿过mid这条线.所以只要s可以到mid上一点x,x可以到t,st就是安全的. 用 ...

  7. AcWing 203. 同余方程 （线性同余方程）打卡

    求关于x的同余方程 ax ≡ 1(mod b) 的最小正整数解. 输入格式输入只有一行,包含两个正整数a,b,用一个空格隔开. 输出格式输出只有一行,包含一个正整数x,表示最小正整数解. 输入数据保证 ...

  8. web服务器环境搭建(及请求代理)

    集成开发环境:(前端开发还是使用下面单独的web服务器比较好,前后端分离会用到代理的功能) 1.安装xampp时,软件会自动安装 微软的  Microsoft Visual C++ 2008 Redi ...

  9. js设计模式——9.装饰器模式

    装饰一个圣诞树 // 装饰器模式,让其依次执行 var tree = {}; tree.decorate = function() { console.log('Make sure the tree ...

  10. 【node】---token的原理及使用---【alley】

    一.登陆的验证流程 当用户请求登录的时候,如果没有问题,我们在服务端生成一条记录,这个记录里可以说明一下登录的用户是谁,然后把这条记录的 ID 号发送给客户端,客户端收到以后把这个 ID 号存储在 C ...