前后端常用通讯方式-- ajax 、websocket

一、前后端常用通讯方式

1. ajax

　　浏览器发起请求，服务器返回数据，服务器不能主动返回数据，要实现实时数据交互只能是ajax轮询（让浏览器隔个几秒就发送一次请求，然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力）。

2. websocket

websocket是HTML5出的东西（协议），是一种全双工通信机制，两端可以及时地互发事件，互发数据，相互通信，只需要浏览器和服务器建立一次连接，服务器就可以主动推送数据到浏览器实现实时数据更新。

　　原生 websocket 支持到IE11 ，实际开发中，有比较著名的两个库socket.io（推荐）（英文版、中文版可能跟新不及时）和sockjs , 它们都对原始的API做了进一步封装和兼容IE，提供了更多功能，都分为客户端和服务端的实现，实际应用中，可以选择使用。

　　websocket 的实现需要后端搭建一个WebSocket服务器，但是如果想搭建一个WebSocket服务器就没有那么轻松了，因为WebSocket是一种新的通信协议，目前还是草案，没有成为标准，市场上也没有成熟的WebSocket服务器或者Library实现WebSocket协议，我们就必须自己动手写代码去解析和组装WebSocket的数据包。要这样完成一个WebSocket服务器，估计所有的人都想放弃，幸好的是市场上有几款比较好的开源库供我们使用，比如 PyWebSocket,WebSocket-Node, LibWebSockets等等，这些库文件已经实现了WebSocket数据包的封装和解析，我们可以调用这些接口，这在很大程度上减少了我们的工作量。

二、socket.io（推荐）

socket.io 是一个为实时应用提供跨平台实时通信的库。socket.io 旨在使实时应用在每个浏览器和移动设备上成为可能，模糊不同的传输机制之间的差异。
socket.io 的名字源于它使用了浏览器支持并采用的 HTML5 WebSocket 标准，因为并不是所有的浏览器都支持 WebSocket ，所以该库支持一系列降级功能：

Websocket
Adobe® Flash® Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling

在大部分情境下，你都能通过这些功能选择与浏览器保持类似长连接的功能。

优点：跨平台、兼容性好、具有降级功能、所有传输机制接口对外统一、自带心跳。
缺点：要使用socket.io必须前后端都要用一套框架。
适用于：考虑更多兼容性，后端可以使用基于socket.io的框架的情景。（常见服务端实现框架有node.js,Netty-socket.io）

客户端代码示例：

<script src="/socket.io/socket.io.js"></script>

<script>

  var socket = io('http://localhost');

  socket.on('news', function (data) {

    console.log(data);

    socket.emit('my other event', { my: 'data' });

  });

</script>

服务器端示例代码：

var app = require('http').createServer(handler)

var io = require('socket.io')(app);

var fs = require('fs');

app.listen(80);

function handler (req, res) {

  fs.readFile(__dirname + '/index.html',

  function (err, data) {

    if (err) {

      res.writeHead(500);

      return res.end('Error loading index.html');

    }

    res.writeHead(200);

    res.end(data);

  });

}

io.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });

  socket.on('my other event', function (data) {

    console.log(data);

  });

});

客户端核心API

socket.io所有API详见这儿

io.connect 建立一个连接

var socket = io.connect('ws://127.0.0.1:3000');

socket.emit 发送一个事件给服务器端（发送数据）

socket.on 监听一个服务器端emit发送的事件（接收数据）

三种默认的事件（客户端和服务器都有）：connect 、message 、disconnect。

服务器端核心API

io.on 监听客户端的连接事件

io.on('connection', function (socket) {

}

socket.emit 发送一个事件给客户端（推送数据）

socket.on 监听一个客户端emit发送的事件（接收数据）

聊天demo

websocket框架实现

常用的 Node 实现有以下几种。

µWebSockets
Socket.IO
WebSocket-Node
websocketd

Java实现：

netty-socketio

　　socket.io设计的目标是支持任何的浏览器，任何Mobile设备。目前支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等)，Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并简化了WebSocket API，统一了通信的API。它支持：WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。

socket.io解决了实时的通信问题，并统一了服务端与客户端的编程方式。启动了socket以后，就像建立了一条客户端与服务端的管道，两边可以互通有无。

三、socket.io 中对 websocket 的使用

　　1.服务端

　　io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket

　　io.sockets.emit(‘String’,data);//给所有客户端广播消息

　　io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息

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

　　socket.emit(‘String’, data);//给该socket的客户端发送消息

　广播消息

　//给除了自己以外的客户端广播消息

　socket.broadcast.emit("msg",{data:"hello,everyone"});

　//给所有客户端广播消息

　io.sockets.emit("msg",{data:"hello,all"});

　分组

 socket.on('group1', function (data) {

        socket.join('group1');

 });

 socket.on('group2',function(data){

        socket.join('group2');

 });

客户端发送

　socket.emit(‘group1’)，就可以加入group1分组；
　socket.emit(‘group2’)，就可以加入group2分组；

一个客户端可以存在多个分组（订阅模式）

　　踢出分组

　　socket.leave(data.room);

　　对分组中的用户发送信息

　　//不包括自己

　　socket.broadcast.to('group1').emit('event_name', data);

　　//包括自己

　　io.sockets.in('group1').emit('event_name', data);

　　broadcast方法允许当前socket client不在该分组内

　　获取连接的客户端socket

　　io.sockets.clients().forEach(function (socket) {

    //.....

　　})

　　获取分组信息

　　//获取所有房间（分组）信息

　　io.sockets.manager.rooms

　　//来获取此socketid进入的房间信息

　　io.sockets.manager.roomClients[socket.id]

　　//获取particular room中的客户端，返回所有在此房间的socket实例

　　io.sockets.clients('particular room')

　　另一种分组方式

　io.of('/some').on('connection', function (socket) {

     socket.on('test', function (data) {

         socket.broadcast.emit('event_name',{});

    });

  });

客户端

var socket = io.connect('ws://103.31.201.154:5555/some')

socket.on('even_name',function(data){

   console.log(data);

})

客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of(‘/some’)将其过滤出来。

另外，Socket.IO提供了4个配置的API：io.configure, io.set, io.enable, io.disable。其中io.set对单项进行设置，io.enable和io.disable用于单项设置布尔型的配置。io.configure可以让你对不同的生产环境（如devlopment，test等等）配置不同的参数。

2.客户端

建立一个socket连接

var socket = io(“ws://103.31.201.154:5555”);

监听服务消息

socket.on('msg',function(data){

    socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息

    console.log(data);

});

socket.on(“String”,function(data)) 监听服务端发送的消息 Sting参数与服务端emit第一个参数相同

监听socket断开与重连。

socket.on('disconnect', function() {

    console.log("与服务其断开");

});

socket.on('reconnect', function() {

    console.log("重新连接到服务器");

});

客户端socket.on()监听的事件：

connect：连接成功

connecting：正在连接

disconnect：断开连接

connect_failed：连接失败

error：错误发生，并且无法被其他事件类型所处理

message：同服务器端message事件

anything：同服务器端anything事件

reconnect_failed：重连失败

reconnect：成功重连

reconnecting：正在重连

当第一次连接时，事件触发顺序为：connecting->connect；当失去连接时，事件触发顺序为：disconnect->reconnecting（可能进行多次）->connecting->reconnect->connect。