HTTP
HTTP无法轻松实现实时应用:
- HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。
- 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如Ajax)。但是,反过来却是不可能的:服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候,所发生事件的信息才会从服务器传递到客户端。
但是,确实聊天室确实存在
方法:
- 长轮询:客户端每隔很短的时间,都会对服务器发出请求,查看是否有新的消息,只要轮询速度足够快,例如1秒,就能给人造成交互是实时进行的印象。这种做法是无奈之举,实际上对服务器、客户端双方都造成了大量的性能浪费。
- 长连接:客户端只请求一次,但是服务器会将连接保持,不会返回结果(想象一下我们没有写res.end()时,浏览器一直转小菊花)。服务器有了新数据,就将数据发回来,又有了新数据,就将数据发回来,而一直保持挂起状态。这种做法的也造成了大量的性能浪费。
WebSocket协议
WebSocket协议能够让浏览器和服务器全双工实时通信,互相的,服务器也能主动通知客户端
- WebSocket的原理非常的简单:利用HTTP请求产生握手,HTTP头部中含有WebSocket协议的请求,所以握手之后,二者转用TCP协议进行交流(QQ的协议)。现在的浏览器和服务器之间,就是QQ和QQ服务器的关系了。所以WebSocket协议,需要浏览器支持,更需要服务器支持。
- 支持WebSocket协议的浏览器有:Chrome 4、火狐4、IE10、Safari5
- 支持WebSocket协议的服务器有:Node 0、Apach7.0.2、nginx1.3
- Socket.IO是业界良心,新手福音。它屏蔽了所有底层细节,让顶层调用非常简单。并且还为不支持WebSocket协议的浏览器,提供了长轮询的透明模拟机制。
- Node.js上需要写一些程序,来处理TCP请求。 使用require(‘dgram‘) 模块
- Node的单线程、非阻塞I/O、事件驱动机制,使它非常适合Socket服务器。
Socket.io
npm install socket.io
制作index.html页面。页面中必须引入 /socket.io/socket.io.js, 调用io函数,取得socket对象。
<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var socket = io(); //socket 对象
</script>
服务器中:
var io = require(‘sockte.io‘)(server);
io.on(‘connection‘,function( socket ){
//socket 对象
socket.on(‘tiwen‘,function( msg ){
console.log(‘服务器接受到了请求‘);
//sockte.emit(‘huida‘,‘ok‘); //单条返回
//广播 , 就是给当前所有用户的发送信息。
io.emit(‘huida‘,‘ok‘);
});
});
客户端和服务器,都有socket对象。 两个对象都具有emit,和on的时间。emit用于发送,on用户接受。
发送的内容可以是任何类型的值。
案例
前台页面:
<body>
<h1>index页面</h1>
信息内容:<input type="text" name="" id="info" value="" />
发送: <input type="button" name="" id="btn" value="发送" />
<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var socket = io();
document.getElementById("btn").onclick = function ( ) {
socket.emit(‘tiwen‘,document.getElementById("info").value);
}
socket.on(‘huida‘,function ( msg ) {
console.log(‘回答:‘ + msg);
});
</script>
</body>
后台:
var http = require(‘http‘);
var fs = require(‘fs‘);
var server = http.createServer(function ( req,res ) {
if ( req.url == ‘/‘ ) {
// 显示首页
fs.readFile(‘./index.html‘,function ( err,data ) {
res.end(data);
});
}
});
// 创建io对象
var io = require(‘socket.io‘)(server);
// 监听连接事件
io.on(‘connection‘,function ( socket ) {
console.log( ‘一个客户端连接了‘ );
socket.on(‘tiwen‘,function ( msg ) {
// console.log( ‘提问为:‘ + msg );
// socket.emit(‘huida‘,‘好呀‘);
// 加上广播
io.emit(‘huida‘,msg);
});
});
server.listen(80);