NodeJS 实战(二) - 聊天室①

node相关概念就不多做描述了，可以自己查看相关手册或者书籍，实战出真经，通过动手来才能真正体会和领悟到nodejs精髓。

第一个demo 为简单的聊天室应用

目标：

初探nodejs 丰富的组件
通过node来实现一个简单的实时应用
熟悉服务端和客户端的交互

基本效果如下

准备

建立目录 Chatroom
安装依赖nodejs模块具体用途将以后细说
- cd 到Chatroom（demo根目录下）
- 输入命令 npm install socket.io
- 输入命令 npm install mime
- 完成后在根目录下，将能看到以下目录结构

开始

根目录下创建 server.js

首先加入以下依赖代码

var http = require('http'); //http 模块 提供http服务和client的功能
var fs = require('fs');     //filesystem 提供文件系统相关功能
var path = require('path'); // 提供文件系统路径相关功能
var mime = require('mime'); // MINE 的支持
var cache = {}; //超级简单的小缓存

接下来加入一些function

第一个函数：为404处理function，当http请求静态文件不存在的时候将发送响应404错误

function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

第二个函数：为请求文件响应

function sendFile(response, filePath, fileContents) {
    response.writeHead(
        200,
        {"content-type": mime.lookup(path.basename(filePath))}
    );
    response.end(fileContents);
}

第三个函数：

function serveStatic(response, cache, absPath) {
    if (cache[absPath]) { //检查文件是否已经在缓存中
        sendFile(response, absPath, cache[absPath]);//发送缓存中文件响应内容
    } else {
        fs.exists(absPath, function(exists) { 检查请求文件是否存在
            if (exists) {
                fs.readFile(absPath, function(err, data) {
                    if (err) {
                        send404(response);
                    } else {
                        cache[absPath] = data;
                        sendFile(response, absPath, data); //发送文件
                    }
                });
            } else {
                send404(response); //如果请求资源文件不存在响应404
            }
        });
    }
}

最后创建nodejs http server：

var server = http.createServer(function(request, response) {//匿名函数http请求预处理
    var filePath = false;
    if (request.url == '/') {
        filePath = 'public/index.html'; //默认为index.html
    } else {
        filePath = 'public' + request.url; //转换URL为文件相对路径
    }
    var absPath = './' + filePath;
    serveStatic(response, cache, absPath); //静态文件处理
});

启动http server 监听3000端口

server.listen(3000, function() {
    console.log("Server listening on port 3000.");
});

整个server.js 应该如下这样了

var http = require('http');
var fs = require('fs');
var path = require('path');
var mime = require('mime');
var cache = {};

function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

function sendFile(response, filePath, fileContents) {
    response.writeHead(
        200,
        {"content-type": mime.lookup(path.basename(filePath))}
    );
    response.end(fileContents);
}

function serveStatic(response, cache, absPath) {
    if (cache[absPath]) {
        sendFile(response, absPath, cache[absPath]);
    } else {
        fs.exists(absPath, function(exists) {
            if (exists) {
                fs.readFile(absPath, function(err, data) {
                    if (err) {
                        send404(response);
                    } else {
                        cache[absPath] = data;
                        sendFile(response, absPath, data);
                    }
                });
            } else {
                send404(response);
            }
        });
    }
}

var server = http.createServer(function(request, response) {
    var filePath = false;
    if (request.url == '/') {
        filePath = 'public/index.html';
    } else {
        filePath = 'public' + request.url;
    }
    var absPath = './' + filePath;
    serveStatic(response, cache, absPath);
});

server.listen(3000, function() {
    console.log("Server listening on port 3000.");
});

View Code

测试下吧：输入命令： node server.js

浏览器输入 localhost:3000 将看到 404 因为index文件还没有呢

加入HTML 和CSS

1.首先在public目录下加入index.html文件

<!doctype html>
<html lang='en'>
<head>
    <title>Chat</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div id='content'>
    <div id='room'></div> <!-- 显示当前房间名称 -->
    <div id='room-list'></div>  <!-- 显示当前房间list -->
    <div id='messages'></div> <!-- 显示聊天框 -->
    <form id='send-form'>
        <input id='send-message' /> <!-- 显示聊天输入框 和命令输入框 -->
        <input id='send-button' type='submit' value='Send'/>
        <div id='help'>
            Chat commands:
            <ul>
                <li>Change nickname: <code>/nick [username]</code></li>
                <li>Join/create room: <code>/join [room name]</code></li>
            </ul>
        </div>
    </form>
</div>
<script src='/socket.io/socket.io.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.8.0.min.js'
        type='text/javascript'></script>
<script src='/javascripts/chat.js' type='text/javascript'></script>
<script src='/javascripts/chat_ui.js' type='text/javascript'></script>
</body>
</html>

2.在public目录下stylesheets目录里加入style.css

body {
    padding: 50px;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
    color: #00B7FF;
}
#content {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#room {
    background-color: #ddd;
    margin-bottom: 1em;
}
#messages {
    width: 690px;
    height: 300px;
    overflow: auto;
    background-color: #eee;
    margin-bottom: 1em;
    margin-right: 10px;
}

重启下node server.js 刷新下浏览器

是不是可以看到点聊天室的雏形了。。。

好了，下一期将继续nodejs聊天功能

posted @ 2013-11-08 10:45 onelee 阅读(670) 评论(0) 收藏举报

刷新页面返回顶部

NodeJS 实战(二) - 聊天室①

目标：

准备

开始

公告