Socket.IO 和 Node.js 入门

http://www.open-open.com/lib/view/open1337216216557.html

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原创翻译


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值