✍13 websocket与socket_io

websocket

• WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术

• 本质上是个基于TCP的协议，它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接，此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信

• (服务端主动向客户端推消息)

socket.io 框架

• socket.io 是基于 Node.js 和 WebSocket 协议的实时通信开源框架

• 它包括客户端的JavaScript和服务器端的Node.js

• ???? WebSocket是SocketIO的一个子集 ???????(什么意思, 包含关系?)

  更新 :

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

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

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

  • 因此说，WebSocket是SocketIO的一个子集

emit(发送) 与 on(监听)

举个小栗子先入门了解, 后面详细学习

• Socket.IO服务器具有一个sockets属性, 属性值为所有与客户端建立连接的socket对象

io.sockets  # 建立的所有客户端 socket 对象

• 可以利用该对象的send方法或者emit方法向所有客户端广播消息

io.sockets.emit(‘String’,data);  # 给所有客户端广播消息 (第一个参数是名字,相对应on通信)
io.sockets.socket(socketid).emit(‘String’, data);  # 通过 socketid 给指定的客户端发送消息(听说已经不能用了)

• 然后在客户端监听 on (客户端和服务端反过来也是一样)

io('url') 就可以得到一个socket对象, 再来看看dcs中的 js

socket.on('String', function(data));  # 监听客户端发送的信息 

Websocket 客户端

WebSocket, 属性, 事件, 方法

示例 :

• 创建一个websocket对象方法

var Socket = new WebSocket(url, [protocol] );  // protocol 是可选的，指定了可接受的子协议

• 使用

// 初始化一个 WebSocket 对象
var ws = new WebSocket('ws://localhost:9998/echo');

// 建立 web socket 连接成功触发事件
ws.onopen = function() {
  // 使用 send() 方法发送数据
  ws.send('发送数据');
  alert('数据发送中...');
};

// 接收服务端数据时触发事件
ws.onmessage = function(evt) {
  var received_msg = evt.data;
  alert('数据已接收...');
};

// 断开 web socket 连接成功触发事件
ws.onclose = function() {
  alert('连接已关闭...');
};

Websocket服务端