前端解决浏览器兼容 服务器推送技术的实践以及一些应用场景的demo（包括

客户端基础类库代码 -- SSE.js和ajax.1.7.js客户端创建连接和定义的代码 以及结合ajax完成双工通道，完成双向都可推送

node -- SSE_server.jsnode服务器代码，处理请求和消息推送

nginx 作为测试服务器进行浏览器和局域网测试

SSE.js 代码改动（比较上一个版本）

改动：

针对上一个版本，增加了数据验证以及一些参数的传递。虽然开启withCredentials可以传递信息的凭据，比如cookie，但是毕竟一个url，也是可以用url带参传递过去的，所以额外增加了这个玩意。so，这样我们就可以在非ie系列的浏览器上痛快的翱翔了。

PS：上面代码为创建的核心代码，其他代码可以到github上看，或者直接npm安装好了看。前端解决浏览器兼容

客户端的准备工作搞好了，下一步就是服务器的工作了，因为一个技术肯定是多个技术配合才能完成的，不懂服务器的前端，不是好前端，这是我一项认可的事情。

下面为简易的node测试代码，没有那么追求精简，为了测试搞的。

最重要的环节开始了，下面就是我的show time。

1. 聊天系统的demo

介绍：既然服务器有了主动推送给客户端的能力，那么最重要的基础场景就是交流。所以这个聊天系统demo应运而生

使用的类库：ajax类库+sse类库（这里的ajax随便大家用什么通信类库，我这里使用的是我自己第一阶段研究的类库）

demo查看：https://github.com/GerryIsWarrior/SSE/blob/master/js-demo/index_chat.html

测试（模拟了2个人，只要服务器吃的消，多少人都可以）：

总结： 这个聊天系统的demo，创建了2个用户，用左边用户进行发送，监控右边用户的控制台的network，可以查看到通信的请求，在左边用户每次发完消息之后，右边用户每次都接受到数据，然后处理到聊天系统界面。前端解决浏览器兼容其实sse后端底层也类似于长连接，只是多了一个服务器可以反向推的动作。

2. 线上客户端缓存的更新demo

使用类库：SSE.js+原生js+postMan去触发推送

demo查看：https://github.com/GerryIsWarrior/SSE/blob/master/js-demo/index_cache.html

测试（模拟localStory缓存用户数据更新）

总结：测试页面，首先我在代码中固定写了一个dom的我是基础缓存的数据，存到localStory中。然后对于这个打开我们的网页上的用户，我使用了postman往我的借口里发送数据，触发推送的动作，比如我的demo中就是发送了一个‘我试更新过的混存数据’，然后推送到客户端，然后客户端接收到这个event，然后更新缓存。这样就完成了线上缓存更新的方式。这样避免了让用户再刷一次页面（重新请求页面数据，比对缓存版本啥的），毕竟用户，才是我们的上帝。

3. 线上代码热修复以及生产版本更新提示用户重新拉取页面

介绍：对于现在更多的spa来说，浏览器下载结束了代码，你使用的代码就是浏览器下载的，如果这块前端代码是有问题的，那么生产跑得代码都是有问题代码，除非用户手动刷新页面，重新请求一个正确的生产代码。

demo查看：https://github.com/GerryIsWarrior/SSE/blob/master/js-demo/index_hotRepair.html

测试（模拟一个线上案例）：

总结：这个案例就是这样，之前我们写死了线上代码要打8折，所以我们最后计算金额的时候就是按照8折去计算的。但是产品过来说，不应该这样啊，这TM不是打9折吗？这样公司会亏损严重的。然后大家都蒙蔽，修正发布。然后发现用户的页面还是8折，用户没刷新。尴尬.....

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-62593-1.html