前后端常用通讯方式-- 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 中对 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("重新连接到服务器");
});