前端常用的通信技术

前段时间在忙开发携程运动项目和相应的微信小程序,其中和后端通信犹为频繁。get、post请求方法是很多前端童鞋使用最频繁的;websocket在11年盛行后方便了客户端和服务器之间传输,……and so on ,除了这些,还有很多我们不常使用的其他方式,但是在实际的业务场景中却真实需要。

本文总结了目前前端使用到的数据交换方式,阐述了业务场景中如何选择适合的方式进行数据交换( form ,xhr, fetch, SSE, webstock, postmessage, web workers等),并列举了一些示例代码, 可能存在不足的地方,欢迎大家指正。

本文用到的源代码都放在Github上,点击下方阅读原文可直达。

关于HTTP协义基础可以参考阮一峰老师的《HTTP协议入门》一文。

前端经常使用的HTTP协议相关(1.0 / 1.1)method

  • GET ( 对应 restful api 查询资源, 用于客户端从服务端取数据 )
  • POST(对应 restful api中的增加资源, 用于客户端传数据到服务端)
  • PUT (对应 restful api中的更新资源)
  • DELETE ( 对应 restful api中的删除资源 )
  • HEAD ( 可以用于http请求的时间什么,或者判断是否存在判断文件大小等)
  • OPTIONS (在前端中常用于 cors跨域验证)
  • TRACE * (我这边没有用到过,欢迎补充)
  • CONNECT * (我这边没有用到过,欢迎补充)

enctype

  • application/x-www-form-urlencoded (默认,正常的提交方式)
  • multipart/form-data(有上传文件时常用这种)
  • application/json (ajax常用这种格式)
  • text/xml
  • text/plain

enctype示例说明( form , ajax, fetch 三种示例 )

服务端 form_action.php

* fetch api是基于Promise设计
* fetch 的一些例子 mdn/fetch-examples

服务器到客户端的推送 – Server-sent Events这个是html5的一个新特性,主要用于服务器推送消息到客户端, 可以用于监控,通知,更新库存之类的应用场景, 在携程运动项目中我们主要应用于线上被预订后通知下发通知到场馆的操作界面上的即时改变状态。

图片来源于网络,侵删

优点: 基于http协义无需特别的改造,调试方便, 可以CORS跨域
server-send events 是服务端往客户端单向推送的,如果客户端需要上传消息可以使用 WebSocket

客户端代码

服务端代码

对于低版本的浏览器可以使用 eventsource polyfill

  • Yaffle/EventSource by yaffle
  • https://github.com/remy/polyfills/blob/master/EventSource.js by Remy Sharp
  • rwaldron/jquery.eventsource by Rick Waldron
  • amvtek/EventSource by AmvTek

客户端与服务器双向通信 WebSocket

特点

1. websocket 是个双向的通信。
2. 常用于应用于一些都需要双方交互的,实时性比较强的地方(如聊天,在线客服)
3. 数据传输量小
4. websocket 是个 持久化的连接

原理图

图片来源于网络. 侵删

这个的服务端是基于 nodejs实现的(不要问为什么不是php,因为 nodejs 简单些!)

server.js

client.html

说完了客户端与服客端之间的通信,现在我们来聊聊客户端之间的通信。

客户端与客户端页面之间的通信 postMessage

主要特点

1. window.postMessage() 方法可以安全地实现跨域通信
2.主要用于两个页面之间的消息传送
3. 可以使用iframe与window.open打开的页面进行通信.

特别的应用场景
我们的页面引用了其他的人页面,但我们不知道他们的页面高度,这时可以通过window.postMessages 从iframe 里面的页面来传到 当前页面.

语法

示例代码
postmessage.html (入口)

post1.html

post2.html

Web Workers 进程通信(html5中的js的后台进程)javascript设计上是一个单线,也就是说在执行js过程中只能执行一个任务, 其他的任务都在队列中等待运行。

如果我们执行大量计算的任务时,就会阻止浏览器执行js,导致浏览器假死。

html5的 web Workers 子进程 就是为了解决这种问题而设计的。把大量计算的任务当作类似ajax异步方式进入子进程计算,计算完了再通过 postmessage通知主进程计算结果。

图片来源于网络. 侵删

主线程代码(index.html)

后台进程代码( compute.js )

上述代码简单的说明一下, 主进程与后台进程之间的互相通信。

(携程技术中心市场营销研发部武艺嫱,对本文亦有贡献)

 

2 11 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 六点大 Out front 07/07

    postMessage这一段的实例代码有一丢丢小问题:

    postMessage是window的方法,window.post1.postMessage好像不行吧

    应该是:window.post1.contentWindow.postMessage

跳到底部
返回顶部