Node.js+socket.io实现实时通信
前两天公司组织HTML5培训,在培训上介绍了Node.js,感觉挺好,回来学习了一下,用Node.js搭建网络服务器,使用socket.io实现网络实时通信。代码很简单,但是在研究过程中遇到了各种问题。在各路大神的帮助下得以解决,特此鸣谢。
首先要安装Node.js(至于Node.js是什么,百度一下,说的老详细了)。
我的操作系统是XP和Win7都可以安装的。
登录Node.js的官方网站下载:http://www.nodejs.org/,点击download按钮
然后点击下载最新的windows版本,之后安装就可以了(我安在了C盘下)。
之后是搭建网络服务器(很简单的):
在node.js的安装目录先建一个js文件,命名为server.js
在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);
启动服务器,测试一次代码:
这个图片代表我们的网络服务器搭建成功了。
下面我们要搭建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浏览器下运行的客户端:
在客户端提交在服务端显示