3）websocket背景下的webview通信实践
小程序webview初始化并在onLoad阶段通过 options.useMktsocket 判断是否需要加载 socket，同时判断应用环境通过 wx.connectSocket api 连接不同的 socket 服务；
初始化webview socket服务，接受服务器消息-对服务器消息进行甄别，如果H5页面通过socket传递给webview容器的数据data格式符合预期，且H5环境下登录态中的openId与小程序环境一致，则认为此次通信合法；
webview容器中绑定了 小程序分享miniShare 、小程序订阅openScribe、 健康检查health等常用业务API，用于处理广告、订阅、任务更新等业务实时回调；H5业务可通过此接口设置触发小程序原生页面的一些原生功能，为上层业务提供服务。
H5页面就可以通过 socket 通信更改并调用小程序的胶囊栏分享、通知webview容器页面调用小程序广告、也可以调用唤起小程序页面中的分享组件面板、触发左上角物理返回时及时通知H5页面触发回调等诸多业务；同时小程序容器页面原生事件完成后（比如广告、分享）再次通过socket返回给H5页面的回调，实现小程序webview跨页面的实时通信。
在websocket加持下，此时的小程序webview赋予了更多和H5通信的功能。
4.5 自定义分享面板
H5页面可以通过 websocket 通信更改并调用小程序的分享参数，不再依赖于页面options参数，可以调用在webview页面封装的分享面板，提供更加灵活的分享方式。
4.6 H5调用小程序原生的激励广告
H5页面可以通过 websocket 通信调用小程序原生的激励广告。
4.7 任务体系中用户任务组件状态的更新
用户在访问加载了webview-h5的页面会与websocket的server A服务器连接、小程序原生页面与server B连接时，这两个页面因为在不同的容器下，所以无法通信和告知；但是只要这两个页面加载的是同一个市场的websocket服务，服务端可以设置共享一个redis，通过redis的发布订阅功能，连通集群内部各个机器，那么在页面前进、回退时都可以绑定对应的回调事件，实现任务组件的灵活更新，给用户展示最新的任务状态。
五、总结在处理小程序webview的业务方面，可以通过封装一个包含各端环境的SDK，在H5初始化时加载，打通H5和小程序webview之间的通道，实现H5控制分享、登录态同步、支付信息同步等功能。
在遇到跨页面数据刷新问题时，借助了websocket这把利器，通过redix的发布订阅通知链接了websocket服务器的页面，实现小程序webview物理返回上一页而数据不刷新的问题，同时websocket使得H5与webview的通信更加便捷灵活，拓展了H5调用小程序原生激励广告、封装并调用小程序原生的分享面板等功能。
【参考文献】- 《WebSockets 教程》，链接：https://www.tutorialspoint.com/websockets/
作者简介
思语，携程高级前端开发工程师，关注互动营销领域；
Olivio，携程高级前端开发工程师，关注React Node 组件化；
Stone，携程高级研发经理，关注跨端解决方案，云原生落地等领域。
来源:微信公众号:携程技术
出处:https://mp.weixin.qq.com/s/XkP07N7czP9iK3QWdCkuqg
