菜鸟学习nodejs--Socket.IO即时通讯
动态web
在html5以前，web的设计上并没有考虑过动态，他⼀直是围绕着⽂档设计的，我们看以前⽐较⽼的⽹站，基本上都是某⼀刻⽤来显⽰单⼀的⽂档的，⽤户请求⼀次web页⾯，获取⼀个页⾯，但是随着时间的推移，⼈们想要web做更多的事情了，⽽不是简单的要显⽰⽂档，⽽javaScript⼀直处于开发⼈员推动web页⾯功能的发展中⼼。
Ajax⽆疑是动态Web页⾯的⼀个重⼤发展，他不再需要我们即使更新⼀点内容，也需要刷新整个页⾯了，但是有些⽅⾯，⼜体现了他的不⾜。如果从服务器请求数据，他固然号，但是如果服务器想要将数据推送到浏览器呢。Ajax技术⽆法很容易的⽀持将数据推送到客户，虽然可以，但是需要跨国很多的障碍才⾏，⽽且不同的浏览器⼯作⽅式也不同，例如IE和FireBox他们的内核就不⼀样，从⽽⼯作⽅式也不⼀样。
WebSocket是在对服务器和客户端之间实现双向通信问题的相应。他的思想是，从头开始，设计⼀个开发⼈员可以使⽤的标准以便以⼀直的⽅式创建应⽤程序，⽽不是通过复杂的，并不总能设置所有浏览器的⼯作。他的思想是Web服务器和浏览器之间保持持久打开，这就使得不管是服务器还是浏览器都可以在想要的时候推送数据。因为连接是持久的，所以数据的交换⾮常的快，也就成了实时的了。
Socket.IO
说了那么多，我们介绍⼀下正主，Socket.IO是Node.js的⼀个模块，他提供通过WebSocket进⾏通信的⼀种简单⽅式，WebSocket协议很复杂，但是Socket.IO提供了服务器和客户端双⽅的组件，所以只需要⼀个模块就可以给应⽤程序加⼊对WebSocket的⽀持。⽽且还能⽀持不同的浏览器。
基础的Socket.IO
Socket.IO既能在服务端也能在客户端⼯作，要使⽤它，必须将其添加到服务器端的JavaScript(Node.js)和客户端的JavaScript(JQuery)中，这是以为内通信通常是双向的，所以Sokcet.IO需要能在两边⼯作。
var server = ateServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
});
}).listen(3000,"127.0.0.1");
console.log('Server running at 127.0.0.1:3000/');
⽽且必须将Socket.IO库包含起来，才能加⼊Socket.IO的功能。
var io = require('socket.io').listen(server);
然后加⼊⼀个事件来响应客户端到底是连接了，还是断开了。事件如下：
('connection',function(socket){
console.log('User connected');
<('disconnect',function(){
console.log('User disconnected');
});
});
是不是觉得⾮常的简单，下⾯我们看⼀下完整的代码实现是如何实现的吧：
简单Socket.IO应⽤
新建app.js
新建⽂件夹socket.io，在该⽂件夹下新建app.js，写如下代码：
var http = require('http');
var fs = require('fs');
var server = ateServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
});
}).listen(3000,"127.0.0.1");
console.log('Server running at 127.0.0.1:3000/');
var io = require('socket.io').listen(server);
('connection',function(socket){
console.log('User connected');
<('disconnect',function(){
console.log('User disconnected');
});
});
新建index.html
新建index.html⽂件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Socket.IO Example</title>
</head>
<body>
<h1>Socket.IO Example</h1>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('127.0.0.1:3000');
</script>
</body>
</html>
新建package.json
新建package.json来引⼊模块。
{
"name":"socketio_example",
"version":"4.13.2",
"private":true,
"dependencies":{
"socket.io":"1.4.5"
}
}
版本号⼤家可以输⼊⾃⼰的nodejs -V，或者socket.io -v来查看⾃⼰的版本号。
运⾏
从服务器发送数据到客户端
上边的实例我们已经实现了连接或者断开服务器做记录了，但是我们要是想要推送消息怎么办，例如我们好友的QQ上线了，腾讯都会咳嗽⼀下来提醒我们有好友上线。下⾯我们来做⼀下这个功能功能。
发送给单个⽤户
('connection',function(socket){
});
发给所有⽤户
('connection',function(socket){
it('message',{'你的好某XXX上线了'});
});
⽆论是发送给单个⽤户还是所有⽤户，这个message是⾃⼰写的，但是要在客户端⽤，所以命名要注意。
websocket和socket客户端
在客户端我们可以添加侦听事件来接收数据。
var socket = io.connect('127.0.0.1:3000');
<('message',function(data){
);
})
通过这些功能，我们就在第⼀个例⼦的基础上，实现⽤户数量的统计。这⾥只需要在服务端设置⼀个变量，count，如果有⼀个上线，那么就数量+1，并通知所有⽤户，最新的在线⼈数。
新建app.js
var http = require('http');
var fs = require('fs');
var count = 0;
var server = ateServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
});
}).listen(3000,"127.0.0.1");
console.log('Server running at 127.0.0.1:3000/');
var io = require('socket.io').listen(server);
('connection',function(socket){
count++;
console.log('User connected' + count + 'user(s) present');
it('users',{number:count});
<('disconnect',function(){
count--;
console.log('User disconnected');
it('users',{number:count});
});
});
创建index.html⽂件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Socket.IO Example</title>
</head>
<body>
<h1>Socket.IO Example</h1>
<h2>How many users are here?</h2>
<p id="count"></p>
<script src="***.***.**.***:9001/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('127.0.0.1:3000');
var count = ElementById('count');
<('users',function(data){
console.log('Got update from the server');
console.log('There are ' + data.number + 'users');
count.innerHTML = data.number
});
</script>
</body>
</html>
创建package.json⽂件
{
"name":"socketio_example",
"version":"4.13.2",
"private":true,
"dependencies":{
"socket.io":"1.4.5"
}
}
将数据⼴播给客户端
接下来我们来看看Socket.IO是如何实现客户端与客户端的通信呢。
要想实现该功能，⾸先需要客户端将消息发送到服务端，·然后服务端发送给除⾃⼰之外的其他客户。服务器将消息发送给客户端的⽅法在上⼀个例⼦中我们已经实现了，那么我们需要的是客户端把接收到的消息发送给服务器。
下边的代码思想是利⽤表单来实现的。
<form id="message-form"action="#">
<textarea id="message"rows="4"cols="30"></textarea>
<input type="submit"value="Send message" />
</form>
<script src="***.***.***.**:9001/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('127.0.0.1:3000');
var message = ElementById('message');
$(message.form).submit(function() {
return false;
});
<('push message', function(data) {
$('form').after('<p>' + + '</p>');
});
</script>
实现的思想是，将JQuery和SocketIO库包含进来，只是浏览器拦截127.0.0.1:3000的服务，使⽤Jquery的submit⽅法加⼊侦听期，等候⽤户提交表单。
发送消息给Socket>IO服务器，⽂本区域的内容位消息发送。
添加return false ，防⽌表单在浏览器窗⼝提交。
在上边已经说过服务器如何⼴播消息，下边我们说⼀下客户端如何显⽰客户端发送的消息。
<('push message', function(data) {
$('form').after('<p>' + + '</p>');
})
实例实现
创建messaging的新⽂件夹
在⽂件夹下创建package.json⽂件，代码如下：
{
"name":"socketio_example",
"version":"4.13.2",
"private":true,
"dependencies":{
"socket.io":"1.4.5"
}
}
创建app.js⽂件，代码如下：
var http = require('http');
var fs = require('fs');
var server = ateServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
});
}).listen(3000,"127.0.0.1");
console.log('Server running at 127.0.0.1:3000/');
var io = require('socket.io').listen(server);
('connection',function(socket){
<('message',function(data){
it('push message',data);
});
});
创建index.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论