WebSocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。该协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点：

• 服务器可以主动向客户端推送信息
• 客户端也可以主动向服务器发送信息
• 是真正的双向平等对话，属于服务器推送技术的一种
• 能更好的节省服务器资源和带宽，并且能够更实时地进行通讯

出现websocket协议的原因：

• HTTP 协议有一个缺陷：通信只能由客户端发起
• 实现推送技术，大多数网站使用的都是 Ajax 轮询，这样会浪费很多的带宽等资源

下面，我们对比一下Ajax轮询和websocket的区别：

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

WebSocket客户端API

WebSocket 构造函数

var Socket = new WebSocket(url, [protocol] );  

WebSocket 属性

webSocket.readyState

只读属性 readyState 表示连接状态，可以是以下值

• 0 - 表示连接尚未建立
• 1 - 表示连接已建立，可以进行通信。
• 2 - 表示连接正在进行关闭。
• 3 - 表示连接已经关闭或者连接不能打

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

• Socket.onopen，连接建立时触发
• Socket.onmessage，客户端接收服务端数据时触发
• Socket.onerror，通信发生错误时触发
• Socket.onclose，连接关闭时触发

WebSocket 方法

• Socket.send()，使用连接发送数据
• Socket.close()，关闭连接

实例

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};  

基于socke.io实现一个聊天室

参考项目
http://socket-io-chat.yaya12.com/

学习资料

菜鸟websocket

socket.io官网

socket.io w3cschool.cn