首页 > 代码库 > socket.io
socket.io
1 WebSocket 和 Socket.IO
WebSocket是对浏览器和服务器之间实现实时双向通信的响应，它涉及的基本思想是保证浏览器和服务器之间的连接持久打开，这样就能保证任何时候推送想要的数据，它是html5的一种新的协议
Socket.IO是实现了WebSocket的基本功能，并且在其基础上又实现了一些其他的功能，例如重新连接。它是node.js的一个模块
2 一个基本的socket.io例子
首先使用node.js创建一个提供文件的服务器
var http = require(‘http‘);
var fs = require(‘fs‘);
var server = http.createServer(function(req,res){
fs.readFile(‘./index.html‘,function(err,data){
res.writeHead(200,{‘Content-Type‘: ‘text/html‘});
res.end(data,‘utf-8‘);//从服务器处读取文件，发送给请求客户端
})
}).listen(3000,‘127.0.0.1‘);
console.log(‘server is on‘);
var io = require(‘socket.io‘).listen(server);//将Socket.IO库加进来并将它附到服务器上，
io.sockets.on(‘connection‘,function(socket){ //当客户连接或者断开时，服务器会打印状态
console.log(‘connected‘);
socket.on(‘disconnect‘,function(socket){
console.log(‘disconnected‘);
});
});
在当前目录下创建index.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.io example</title>
</head>
<body>
<h1>Socket.io example</h1>
<script type="text/javascript" src="http://www.mamicode.com/socket.io/socket.io.js"></script>//为客户端也提供Socket.IO (当我们在一个服务器上也同时运行客户端的时候，会自动为我们提供socket.io库)
<script type="text/javascript">
var socket = io.connect(‘http://127.0.0.1:3000‘);//连接到我们刚才创建的服务器
</script>
</body>
</html>
在package.json 中加入依赖
{
"name": "socket_example",
"version": "0.0.0",
"private": "true",
"dependencies" : {
"socket.io": "0.8.7"
}
}
运行npm install node app.js 连接127.0.0.1：3000 在关闭网页
从服务器发送数据到客户端
修改我们之前的app.js
io.sockets.on(‘connection‘,function(socket){ //当客户连接或者断开时，服务器会打印状态
socket.emit(‘message‘,{text:‘you connected‘});//当服务器收到连接时，以message事件的形式发送数据
console.log(‘connected‘);
socket.on(‘disconnect‘,function(socket){
console.log(‘disconnected‘);
});
});
修改index.html 加入
var socket = io.connect(‘http://127.0.0.1:3000‘);
socket.on(‘message‘,function(data){
alert(data.text);
});
在客户端监听message事件，连接时得到从服务器发送过来的数据
运行app.js
将数据从客户端发送给服务器，在通过服务器将数据广播给所有已经连接的客户端
创建index.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.io example</title>
</head>
<body>
<h1>Socket.io example</h1>
<form id="message-form" action="#">//表单用于接受用户输入
<textarea id="message" rows="4" cols="30"></textarea>
<input type="submit" value="http://www.mamicode.com/send message" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect(‘http://127.0.0.1:3000‘);
var message = document.getElementById(‘message‘);
$(message.form).submit(function(){
socket.emit(‘message‘,{text: message.value});
return false;
});//获得用户的输入并通过监听submit()方法，将用户输入提交给Socket.IO服务器
socket.on(‘push message‘,function(data){
$(‘form‘).after(‘<p>‘ + data.text + ‘</p>‘);
});//客户端监听push message事件 将接收到的数据显示出来
</script>
</body>
</html>
创建app.js
var http = require(‘http‘);
var fs = require(‘fs‘);
var server = http.createServer(function(req,res){
fs.readFile(‘./index.html‘,function(err,data){
res.writeHead(200,{‘Content-Type‘: ‘text/html‘});
res.end(data,‘utf-8‘);
})
}).listen(3000,‘127.0.0.1‘);
console.log(‘server is on‘);
var io = require(‘socket.io‘).listen(server);
io.sockets.on(‘connection‘,function(socket){
socket.on(‘message‘,function(data){//在Socket.IO服务器上监听message事件 接收来自客户端的数据并将数据广播出去
socket.broadcast.emit(‘push message‘,data);
});
});
运行app.js
我打开了3个窗口 都访问 127.0.0.1:3000
在第一个窗口输入并且发送的时候 其他的窗口得到了信息并且输出
socket.io