一、websocket介绍
Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定
socket最大的特点是服务端可以主动向客户端推动新型,客户端也可以主动向服务端发送信息。
在socket API中,浏览器和服务器只需要做一个握手动作,然后浏览器和服务器之间就形成了一条快速通道,两者之间就直接可以数据互传。
二、为什么要使用websocket?
我们知道浏览器已经支持http协议,但是http协议是一种单向的网络协议,
在建立连接后,仅允许Browser/UserAgent向WebServer发出请求资源后,WebServer才能返回对应的数据,而WebServer不能主动的推送数据给Browser/UserAgent。
最初这么设计HTTP协议的原因是,假设WebServer能主动的推送数据给Browser/UserAgent,那么Browser/UserAgent就太容易受到攻击了,一些广告商也会主动把广告在不经意间强行的传输给客户端,这不能不说是一个灾难。那么单向的HTTP协议给Web应用开发带哪些问题呢?
现在假设我们要开发一个基于Web的应用去获取当前WebServer的实时数据。例如股票实时行情、火车票剩余票数等。这就需要Browser/UserAgent与WebServer之间反复进行HTTP通信,Browser/UserAgent不断的发送请求去获取当前的实时数据。
三、websocket原理
WebSocket是一种双向通信协议,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但与HTTP最大不同的是:
-
WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/UserAgent都能主动的向对象发送或接收数据,就像Socket一样,不同的是WebSocket是一种建立在Web基础上的简单模拟Socket的协议。
-
WebSocket需要通过握手连接,类似TCP也需要客户端和服务端进行握手连接,连接成功后才能相互通信。
当Web应用端调用new WebSocket(url)
接口时,Browser就开始了与地址为URL的WebServer建立握手连接的过程。
-
Browser与WebSocket服务器通过TCP三次握手建立连接,如果这个建立连接失败,那么后面的过程就不会执行,Web应用将收到错误消息通知。
-
在TCP建立连接成功后,Browser/UserAgent通过HTTP协议传送WebSocket支持的版本号、协议的字版本号、原始地址、主机地址等一系列字段给服务端。
-
WebSocket服务器收到Browser/UserAgent发送来的握手请求后,如果数据包数据和格式正确,客户端和服务端的协议版本匹配等,就接受本次握手连接,并给出对应的数据回复,同样回复的数据包也是采用HTTP协议传输。
-
Browser收到服务器回复的数据包后,如果数据包内容、格式都没有问题的话,就表示本次连接成功,触发
onopen
消息,此时Web开发者就可以在此时通过send
接口向服务器发送数据。否则,握手连接失败,Web应用会收到onerror
消息,并且能知道连接失败的原因。
四、socket.io
socket.io是一个跨浏览器支持WebSocket的实时通讯的JS。socket.io提供了基于事件的实时双向通讯,它同时提供了服务端和客户端的API。
服务端
服务端socket.io必须绑定一个http.Server
实例,因为WebSocket协议是构建在HTTP协议之上的,所以在创建WebSocket服务时需调用HTTP模块并调用其下createServer()
方法,将生成的server作为参数传入socket.io。
var httpServer = require('http').createServer();
var io = require('socket.io')(httpServer);
httpServer.listen(3000);
Express框架中使用
let app = require('express');
let httpServer= require('http').Server(app);
let io = require('socket.io')(httpServer);
app.listen(3000);
建立连接
当服务端和客户端连接成功时,服务端会监听到connection
和connect
事件,客户端会监听到connect
事件,断开连接时服务端对应到客户端的socket与客户端均会监听到disconcect
事件。
/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// socket.io引入成功后,可通过io()生成客户端所需的socket对象。
let socket = io('http://127.0.0.0:3000');
// socket.emit()用户客户端向服务端发送消息,服务端与之对应的是socket.on()来接收信息。
socket.emit('client message', {msg:'hi, server'});
// socket.on()用于接收服务端发来的消息
socket.on('connect', ()=>{
console.log('client connect server');
});
socket.on('disconnect', ()=>{
console.log('client disconnect');
});
</script>
/*服务端*/
// 服务端绑定HTTP服务器实例
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000);
// 服务端监听连接状态:io的connection事件表示客户端与服务端成功建立连接,它接收一个回调函数,回调函数会接收一个socket参数。
io.on('connection', (socket)=>{
console.log('client connect server, ok!');
// io.emit()方法用于向服务端发送消息,参数1表示自定义的数据名,参数2表示需要配合事件传入的参数
io.emit('server message', {msg:'client connect server success'});
// socket.broadcast.emit()表示向除了自己以外的客户端发送消息
socket.broadcast.emit('server message', {msg:'broadcast'});
// 监听断开连接状态:socket的disconnect事件表示客户端与服务端断开连接
socket.on('disconnect', ()=>{
console.log('connect disconnect');
});
// 与客户端对应的接收指定的消息
socket.on('client message', (data)=>{
cosnole.log(data);// hi server
});
socket.disconnect();
});
传输数据
服务端和客户端的socket是一个关联的EventEmitter
对象,客户端socket派发的事件可以通过被服务端的socket接收,服务端socket派发的事件也可以被客户端接收。基于这种机制,可以实现双向交流。
# 模拟:客户端不断发送随机数,当随机数大于0.95时,服务端延迟1s后向客户端发送警告以及警告次数。
/*客户端*/
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
let socket = io('http://127.0.0.1:3000');
let interval = setTimeInterval(()=>{
socket.emit('random', Math.random());
}, 500);
socket.on('warn', count=>{
console.log('warning count : '+count);
});
socket.on('disconnect', ()=>{
clearInterval(interval);
});
</script>
/*服务端*/
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer);
httpServer.listen(3000);
io.on('connection', socket=>{
socket.on('random', value=>{
console.log(value);
if(value>0.95){
if(typeof socket.warnign==='undefined'){
socket.warning = 0;// socket对象可用来存储状态和自定义数据
}
setTimeout(()=>{
socket.emit('warn', ++socket.warning);
}, 1000);
}
});
});