180.Vue.js智能扫码点餐系统（十四）【Socket.io同步购物车数据的准备工作】2019.03.24

0、知识点

• Socket.io 同步
• 购物车数据同步逻辑
• 如何让服务器主动给客户端推送消息？
• WebSocket 和 Socket.io

1、 购物车数据同步逻辑

2、如何让服务器主动给客户端推送消息？

• 我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如 Ajax）。
• 但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。
• 只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。

让服务器主动给客户端推送消息常见的做法有下面几种方式。

• 长轮询

  • 客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要
    轮询速度足够快，例如 1 秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，
  • 实际上对服务器、客户端双方都造成了大量的性能浪费。
  • 现在已经被淘汰了，基本上不会使用这种方式

• 长连接

  • 浏览器和服务器只需要要做一个握手的动作，在建立连接之后，双方可以在任
    意时刻，相互推送信息。
  • 同时，服务器与客户端之间交换的头信息很小。

3、WebSocket 和 Socket.io

• WebScoket
  • WebScoket 是一种让客户端和服务器之间能进行双向实时通信的技术
  • 它是 HTML 最新标准HTML5 的一个协议规范，本质上是个基于 TCP 的协议
  • 它通过 HTTP/HTTPS 协议发送一条特殊的请求进行握手后创建了一个 TCP 连接
  • 此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信
  • 所以 WebSocket 协议，需要浏览器支持，更需要服务器支持

● 支持 WebSocket 协议的浏览器有：Chrome 4、火狐 4、IE10、Safari5
● 支持 WebSocket 协议的服务器有：Node 0、Apach7.0.2、Nginx1.3
Node.js 上需要写一些程序，来处理 TCP 请求。

2、Socket.io

• WebSocket 是 HTML5 最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况

• 为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO 将 WebSocket、AJAX 和其它的通信方式全部封装成了统一的通信接口

• 也就是说，我们在使用 SocketIO 时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket 是 SocketIO 的一个子集。

• Node.js 从诞生之日起，就支持 WebSocket 协议。不过，从底层一步一步搭建一个 Socket 服务器很费劲。所以，有大神帮我们写了一个库 Socket.IO。

• 网址：http://socket.io/

• socket.io网站首页