Node.js+socket.io实现实时通信

前两天公司组织HTML5培训,在培训上介绍了Node.js,感觉挺好,回来学习了一下,用Node.js搭建网络服务器,使用socket.io实现网络实时通信。代码很简单,但是在研究过程中遇到了各种问题。在各路大神的帮助下得以解决,特此鸣谢。

首先要安装Node.js(至于Node.js是什么,百度一下,说的老详细了)。

我的操作系统是XP和Win7都可以安装的。

登录Node.js的官方网站下载:http://www.nodejs.org/,点击download按钮

Node.js+socket.io实现实时通信_第1张图片

然后点击Node.js+socket.io实现实时通信_第2张图片下载最新的windows版本,之后安装就可以了(我安在了C盘下)。

之后是搭建网络服务器(很简单的):

在node.js的安装目录先建一个js文件,命名为server.js

Node.js+socket.io实现实时通信_第3张图片

在server.js里编写如下代码:

View Code
1 var http = require("http");
2 
3 http.createServer(function(request, response) {
4   response.writeHead(200, {"Content-Type": "text/plain"});
5   response.write("Hello World");
6   response.end();
7 }).listen(8888);

启动服务器,测试一次代码:

Node.js+socket.io实现实时通信_第4张图片

这个图片代表我们的网络服务器搭建成功了。

下面我们要搭建socket.io网络通信。

首先要安装socket.io,在命令行下输入 npm install socket.io 

自动运行安装。

socket.io网络通信是搭在网络服务器上的。关于socket.io网络通信基本操作请查看官网的说明(很详细的)http://socket.io/#how-to-use

我的代码经过了小小的改良

服务端代码:

View Code
 1 var app = require('http').createServer(handler)
 2   , io = require('socket.io').listen(app)
 3   , fs = require('fs')
 4 
 5 app.listen(80);
 6 
 7 function handler (req, res) {
 8   fs.readFile(__dirname + '/index.html',
 9   function (err, data) {
10     if (err) {
11       res.writeHead(500);
12       return res.end('Error loading index.html');
13     }
14 
15     res.writeHead(200);
16     res.end(data);
17   });
18 }
19 io.sockets.on('connection', function (socket) {
20   socket.emit('news', { hello: 'world' });
21   socket.on('my other event', function (data) {
22     console.log(data);
23   });
24   socket.on("message", function(data) {  
25         socket.send("Hello " + data);  
26     });  
27    
28     socket.on("disconnect", function() {  
29         console.log("disconnected");  
30     });
31 });

客户端代码:index.html

View Code
 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4           <script src="http://localhost:80/socket.io/socket.io.js"></script>
 5         <script>
 6           var socket = io.connect('http://localhost');
 7           socket.on('news', function (data) {
 8             console.log(data);
 9             socket.emit('my other event', { my: 'data' });
10           });
11           socket.on("message", function(data){   
12                 console.log("received message: " + data);  
13                 document.getElementById("message").innerHTML = data;  
14             });  
15           socket.on("disconnect", function(){   
16                 console.log("disconnected");    
17             })  
18    
19           function send() {  
20                 var name = document.querySelector("input[name=name]").value;  
21                 console.log("send message: " + name);  
22                 socket.send(name);  
23             }
24         </script>
25     </head>  
26     <body>
27         <label for="name">What's your name:</label>  
28         <input type="text" id="name" name="name" />  
29         <button onClick="send()">Send</button>  
30         <div id="message" style="color: red"></div>
31     </body>  
32 </html> 

 

先运行服务端:node server.js

在浏览器中打开客户端,就可以操作了。

我是在chrom浏览器下运行的客户端:

在客户端提交在服务端显示

Node.js+socket.io实现实时通信_第5张图片

你可能感兴趣的:(node.js)