Socket.IO 和 Node.js 入门

Node.js 并不能做所有事情，但它可通过 Socket.IO 库轻松实现 WebSockets。使用 WebSockets 可轻松构建实时多用户的应用程序或游戏，今天我们将讲述如何使用 Node.js 和 Socket.IO 构建简单的聊天程序。

注意: 在阅读文章之前你应该先安装好 Node.js，同时你需要一个自己喜欢的文本编辑器，本文提及的一些源码有些改自 http://book.mixu.net/ch13.html

下面我们开始入门教程：

首先在你的电脑上创建一个新目录，姑且命名为 chat，然后在该目录创建两个文件，分别是 app.js 和 index.html。

app.js 文件内容如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var fs = require( 'fs' )      , http = require( 'http' )      , socketio = require( 'socket.io' );    var server = http.createServer( function (req, res) {      res.writeHead(200, { 'Content-type' : 'text/html' });      res.end(fs.readFileSync(__dirname + '/index.html' )); }).listen(8080, function () {      console.log( 'Listening at: http://localhost:8080' ); });    socketio.listen(server).on( 'connection' , function (socket) {      socket.on( 'message' , function (msg) {          console.log( 'Message Received: ' , msg);          socket.broadcast.emit( 'message' , msg);      }); });

上述代码是一个超级简单的聊天服务器的实现，该服务器发送 index.html 并侦听所有 WebSockets 请求，如果你发送一个 hi 的聊天信息，格式如下：

?

1	{ "name" : "message" , "args" :[ "hi" ]}

index.html 页面代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

< html > < head >      < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></ script >      < script src = "/socket.io/socket.io.js" ></ script >      < script >          $(function(){              var iosocket = io.connect();                 iosocket.on('connect', function () {                  $('#incomingChatMessages').append($('< li >Connected</ li >'));                     iosocket.on('message', function(message) {                      $('#incomingChatMessages').append($('< li ></ li >').text(message));                  });                  iosocket.on('disconnect', function() {                      $('#incomingChatMessages').append('< li >Disconnected</ li >');                  });              });                 $('#outgoingChatMessage').keypress(function(event) {                  if(event.which == 13) {                      event.preventDefault();                      iosocket.send($('#outgoingChatMessage').val());                      $('#incomingChatMessages').append($('< li ></ li >').text($('#outgoingChatMessage').val()));                      $('#outgoingChatMessage').val('');                  }              });          });      </ script > </ head > < body > Incoming Chat:&nbsp;< ul id = "incomingChatMessages" ></ ul > < br /> < input type = "text" id = "outgoingChatMessage" > </ body > </ html >

该页面虽然不怎么吸引人，但是可正常工作。接下来打开两个浏览器，必须得是支持 WebSockets 的浏览器，例如 Chrome 或者 Safari。

下一步就是安装 Socket.IO 了，可在命令行窗口中执行如下命令：

?

1	$ npm install socket.io

然后运行 app.js 文件：

?

1	$ node app.js

现在你可以打开两个浏览器，访问 http://localhost:8080/ 地址开始互聊了。

英文原文，OSCHINA原创翻译

Node.js 并不能做所有事情，但它可通过 Socket.IO 库轻松实现 WebSockets。使用 WebSockets 可轻松构建实时多用户的应用程序或游戏，今天我们将讲述如何使用 Node.js 和 Socket.IO 构建简单的聊天程序。

注意: 在阅读文章之前你应该先安装好 Node.js，同时你需要一个自己喜欢的文本编辑器，本文提及的一些源码有些改自 http://book.mixu.net/ch13.html

下面我们开始入门教程：

首先在你的电脑上创建一个新目录，姑且命名为 chat，然后在该目录创建两个文件，分别是 app.js 和 index.html。

app.js 文件内容如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var fs = require( 'fs' )      , http = require( 'http' )      , socketio = require( 'socket.io' );    var server = http.createServer( function (req, res) {      res.writeHead(200, { 'Content-type' : 'text/html' });      res.end(fs.readFileSync(__dirname + '/index.html' )); }).listen(8080, function () {      console.log( 'Listening at: http://localhost:8080' ); });    socketio.listen(server).on( 'connection' , function (socket) {      socket.on( 'message' , function (msg) {          console.log( 'Message Received: ' , msg);          socket.broadcast.emit( 'message' , msg);      }); });

上述代码是一个超级简单的聊天服务器的实现，该服务器发送 index.html 并侦听所有 WebSockets 请求，如果你发送一个 hi 的聊天信息，格式如下：

?

1	{ "name" : "message" , "args" :[ "hi" ]}

index.html 页面代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

< html > < head >      < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></ script >      < script src = "/socket.io/socket.io.js" ></ script >      < script >          $(function(){              var iosocket = io.connect();                 iosocket.on('connect', function () {                  $('#incomingChatMessages').append($('< li >Connected</ li >'));                     iosocket.on('message', function(message) {                      $('#incomingChatMessages').append($('< li ></ li >').text(message));                  });                  iosocket.on('disconnect', function() {                      $('#incomingChatMessages').append('< li >Disconnected</ li >');                  });              });                 $('#outgoingChatMessage').keypress(function(event) {                  if(event.which == 13) {                      event.preventDefault();                      iosocket.send($('#outgoingChatMessage').val());                      $('#incomingChatMessages').append($('< li ></ li >').text($('#outgoingChatMessage').val()));                      $('#outgoingChatMessage').val('');                  }              });          });      </ script > </ head > < body > Incoming Chat:&nbsp;< ul id = "incomingChatMessages" ></ ul > < br /> < input type = "text" id = "outgoingChatMessage" > </ body > </ html >

该页面虽然不怎么吸引人，但是可正常工作。接下来打开两个浏览器，必须得是支持 WebSockets 的浏览器，例如 Chrome 或者 Safari。

下一步就是安装 Socket.IO 了，可在命令行窗口中执行如下命令：

?

1	$ npm install socket.io

然后运行 app.js 文件：

?

1	$ node app.js

现在你可以打开两个浏览器，访问 http://localhost:8080/ 地址开始互聊了。

英文原文，OSCHINA原创翻译