Socket.IO 和 Node.js 入门

红薯 发布于 2012/05/16 23:12
阅读 45K+
收藏 131

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 文件内容如下:

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 的聊天信息,格式如下:

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

index.html 页面代码如下:

<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 了,可在命令行窗口中执行如下命令:

$ npm install socket.io

然后运行 app.js 文件:

$ node app.js

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

英文原文OSCHINA原创翻译

加载中
1
F
FreeBluer
如何用Socket.io发送和在客户端显示中文? 服务端用emit发送中文信息,在客户端会乱码,要进过怎样的编码?(客户端页面使用的是UTF-8)
g8up
g8up
我也莫明其妙的遇到了乱码的问题。 我是用 encodeURIComponent() 和decodeURIComponent()搞定的。
0
Alex思想者
Alex思想者
红薯,看这篇文章发布日期是晚上11:12,请问你经常这样熬夜吗?
g8up
g8up
对楼主这种稀有物种表示好奇啊~ 11点。。别我早2、3个小时呢
_帅的被人砍
_帅的被人砍
这还算熬夜?那我们到凌晨5点的 算起的早的、?
Alex思想者
Alex思想者
回复 @WenLuo : 大家要注意自己的头发啊,经常熬夜易掉发。
vaenow
vaenow
11点就很晚了么?感觉我一直都是12点才睡的。。。可怜的熬夜啊
皮总
皮总
熬夜算什么,还早起呢
0
假正经哥哥
假正经哥哥
11:12 分那还很早啊,程序员哪有那么早睡觉的
0
胖猫
胖猫
楼上,你是IT行吗?11点基本上睡着的少吧
0
轻风抚翼
轻风抚翼
12点以后才叫 熬夜
0
pigdonkey
pigdonkey
一致同意11:12不算熬夜的...
0
antipro
antipro
socket.io是如何实现websocket的?如果浏览器本身不支持呢?
m
miaomiaogong1
GoEasy实时Web推送,支持后台推送和前台推送两种:后台推送可以选择Java SDK、 Restful API支持所有开发语言;前台推送:JS推送。无论选择哪种方式推送代码都十分简单(10分钟可搞定)。由于它支持websocket 和polling两种连接方式所以兼顾大多数主流浏览器,低版本的IE浏览器也是支持的。另外GoEasy针对前台推送采用OTP (one-time-password)方
北河
北河
不支持websocket的貌似会使用flash socket。
0
懵懂一时
懵懂一时
学习下,socket.io IE不支持的么?!
0
lion_yang
lion_yang
11才是夜生活的开始
返回顶部
顶部