WebSocket介绍

--------------------------------11-15更新---------------------------------------------

作用

任何技术的出现都是为了解决某些问题而存在，存在即合理，带着问题去学习某个新技术也是我一直崇尚的学习方式。

回到正题，那么这个WebSocket的出现是为了解决什么问题？

答案：为了实现客户端（网页）和服务端（数据库）之间低延迟的双向通信。

背景

一个网站很大程度上是围绕所谓的HTTP请求/响应规范做出来的。

客户端加载了一个网页，基本上在用户没有点击下一页按钮之前，什么事都不会发生。

在2005年之前，所有网站的页面都是静态的即页面上数据不会自动更新，除非跳转页面或者刷新页面，直到2005年左右，开始AJAX技术的出现实现了可以让网页进行局部刷新，让其看上去可以动态变化。

然而，所有的HTTP通信必须由客户端发起，也就是说用户必须对页面进行交互才能从服务器的数据库中加载新数据。

其实也有实现让服务器在有新数据的情况下自动将数据传递给客户端的技术，并且已经存在很长时间。而这些技术最大的共同点就是客户端会一直建立起HTTP通信直到服务端响应新的数据。比如Gmail中的聊天。

但这些实现的技术都有同样的问题，一直建立HTTP通信的性能太差，可能会造成延迟的现象，就像第一称的网络射击游戏一样。

介绍WebSocket

其实WebSocket就是一个API，为了在网页浏览器和服务器之间建立socket通信的API

简单来说，在两个城市（客户端和服务器）之间有一条不会消失的通道，两个城市在任何时候都可以互相运送物资（数据），不论从哪方开始都可以

开始

通过实例化一个WebSocket实例开始一个WebSocket通信

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

注意ws，这是专门用于WebSocket通信的新URL协议，跟http的https一样都有一个s后缀的协议wss，目的都是为了建立更安全的通信。

第二个参数接收的是子协议，可以是数组，可以是字符串。

// 当通信建立，向服务器发送数据
connection.onopen = function () {
  connection.send('Ping'); // Send the message 'Ping' to the server
};

// 通信失败，打印错误信息
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// 打印从服务器接收到数据
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};