前端开发社区我爱编程

《Node.js实战》阅读笔记（二）

2018-03-22  本文已影响11人  amCow

千里之行，始于足下。第二章是实战内容：构建多个房间的聊天室程序。
本章会构建一个在线聊天程序，用户可以在一个简单的表单中输入消息，相互聊天，消息输入后会发送给同一聊天室内的其他所有用户。

程序需求及初始设置

需求：进入聊天室后，程序会自动给用户分配一个昵称，但他们可以用聊天命令修改自己的昵称。聊天命令以斜杠（/）开头。同样，用户可以输入命令创建新的聊天室（或加入已有的聊天室）。在加入或创建聊天室时，新聊天室的名称会出现在聊天程序顶端的水平条上，也会出现在聊天消息区域右侧的可用房间列表中。
将要创建的聊天程序需要完成如下任务：

创建程序的文件结构

npm init --y
npm i socket.io mime --save-dev

创建静态文件服务器

var http = require('http');
var fs = require('fs');
var path = require('path');
var mime = require('mime');
// cache 是用来缓存文件内容的对象
var cache = {};

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

// 发送文件
function sendFile(res, filePath, fileContents){
    res.writeHead(200, {
                // mime2.0以上lookup更名为getType
        'Content-Type': mime.getType(path.basename(filePath))
    });
    res.end(fileContents);
}

访问内存（RAM）要比访问文件系统快得多，所以Node程序通常会把常用的数据缓存到内存里。我们的聊天程序就要把静态文件缓存到内存中，只有第一次访问的时候才会从文件系统中读取。下一个辅助函数就会确定文件是否缓存了，如果是，就返回它。如果文件还没缓存，它会从硬盘中读取并返回它。如果文件不存在，则返回一个HTTP 404错误作为响应。如下：

// 提供静态文件服务
function serveStatic(res, cache, absPath) {
    // 检查文件是否缓存在内存中
    if(cache[absPath]){
        // 从内存中返回文件
        sendFile(res, absPath, cache[absPath]);
    } else {
        // 检查文件是否存在
        fs.exists(absPath, function(exists){
            if(exists) {
                // 从硬盘中读取文件
                fs.readFile(absPath, function(err, data){
                    if(err){
                        send404(res);
                    }else{
                        // 从硬盘中读取文件并返回
                        cache[absPath] = data;
                        sendFile(res, absPath, data);
                    }
                })
            } else{
                // 发送HTTP 404 响应
                send404(res);
            }
        });
    }
}

// 创建HTTP服务器
var server = http.createServer(function(req, res){
    var filePath = false;
    if(req.url == '/'){
        // 确定返回的默认HTML文件
        filePath = 'public/index.html'
    }else{
        // 将URL路径转为文件的相对路径
        filePath = 'public' + req.url;
    }
    var absPath = './' + filePath;
    // 返回静态文件
    serveStatic(res, cache, absPath);
});

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

在命令行中输入下面这条命令启动：

node server.js

服务器运行起来后，在浏览器中访问http://127.0.0.1:3000会激发404错误辅助函数，页面上会显示“Error 404: resource not found。”
尽管你已经添加了静态文件处理逻辑，但还没添加那些静态文件。记住，在命令行中按下Ctrl-C可以停止正在运行的服务器。
接下来，让我们把必须的静态文件加上，把这个聊天程序的功能再向前推进一步。

添加HTML和CSS文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>chat</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
    <div id="content">
        <div id="room">
            <div id="room-list"></div>
            <div id="message"></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>
    </div>
    <script src="./javascripts/jquery-1.11.0.min.js"></script>
    <script src="./javascripts/socket.io.js"></script>
    <script type="text/javascript" src="javascripts/chat.js"></script>
    <script type="text/javascript" src="javascripts/chat_ui.js"></script>
</body>
</html>

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: #ddd;
    margin-bottom: 1em;
}
#message{
    width: 690px;
    height: 300px;
    overflow: auto;
    background: #eee;
    margin-bottom: 1em;
    margin-right: 10px;
}

这个程序还不能用，但静态文件已经可以看了，基本的视觉布局也搭建好了。把这些料理好了之后，我们接下来去定义服务端聊天消息的分发。

用Socket.IO 处理与聊天相关的消息

我们前面说过程序必须要做三件事，其中第一个提供静态文件已经做了，现在来解决第二个，处理浏览器和服务器之间的通信。
Socket.IO为Node及客户端JavaScript提供了基于WebSocket以及其他传输方式的封装，它提供了一个抽象层。如果浏览器没有实现WebSocket，Socket.IO会自动启用一个备选方案，而对外提供的API还是一样的。
Socket.IO提供了开箱即用的虚拟通道，所以程序不用把每条消息都向已连接的用户广播，而是只向那些预订了某个通道的用户广播。
Socket.IO还是事件发射器（Event Emitter）的好例子。事件发射器本质上是组织异步逻辑的一种很方便的设计模式。

// 设置socket.io服务器
var chatServer = require('./lib/chat_server.js');
chatServer.listen(server);

现在你要在lib目录中创建一个新文件，chat_server.js。先把下面的变量声明添加到这个文件中。这些声明让我们可以使用Socket.IO，并初始化了一些定义聊天状态的变量：

var socketio = require('socket.io');
var io;
var guestNumber = 1;
var nickNames = {};
var namesUsed = [];
var currentRoom = ();

// 启动socket.io服务器
exports.listen = function(server) {
    io = socketio.listen(server);
    io.set('log level', 1);
    // 定义每个用户连接的处理逻辑
    io.sockets.on('connection', function(socket){
        // 在用户连接上来时赋予其一个访问名
        guestNumber = assignGuestName(socket, guestNumber, nickNames, namesUsed);
        // 在用户连接上来时把他放入聊天室Lobby
        joinRoom(socket, 'Lobby');
        // 处理用户的消息，更名，以及聊天室的创建和变更
        handleMessageBroadcasting(socket, nickNames);
        handleNameChangeAttempts(socket, nickNames, namesUsed);
        handleRoomJoining(socket);
        // 用户发出请求时，向其提供已经被占用的聊天室的列表
        socket.on('rooms', function() {
            socket.emit('rooms', io.sockets.manager.rooms);
        });
        // 定义用户断开连接后的清除逻辑
        handleClientDisconnection(socket, nickNames, namesUsed);
    })
}

// 分配昵称
function assignGuestName(socket, guestNumber, nickNames, namesUsed){
    // 生成新昵称
    var name = 'Guest' + guestNumber;
    // 把用户昵称跟客户端连接ID关联上
    nickNames[socket.id] = name;
    // 让用户知道他们的昵称
    socket.emit('nameResult', {
        success: true,
        name: name
    });
    // 存放已经被占用的昵称
    namesUsed.push(name);
    // 增加用来生成昵称的计数器
    return guestNumber + 1;
}

// 进入聊天室
function joinRoom(socket, room){
    // 让用户进入房间
    socket.join(room);
    // 记录用户的当前房间
    currentRoom[socket.id] = room;
    // 让用户知道他们进入了新的房间
    socket.emit('joinResult', {
        room: room
    });
    // 让房间里的其他用户知道有新用户进入了房间
    socket.broadcast.to(room).emit('message', {
        text: nickNames[sockets.id] + 'has joined' + room + '.'
    });
    // 确定有哪些用户在这个房间里
    var usersInRoom = io.socket.clients(room);
    // 如果不止一个用户在这个房间，汇总下都是谁
    if(usersInRoom.length > 1){
        var usersInRoomSummary = 'Users currently in ' + room + ':';
        for(var index in usersInRoom){
            var userSocketId = usersInRoom[index].id;
            if(userSocketId != socket.id){
                if(index > 0){
                    usersInRoomSummary += ',';
                }
                usersInRoomSummary += nickNames[userSocketId];
            }
        }
    }
    usersInRoomSummary += '.';
    // 将房间里的其他用户的汇总发送给这个用户
    socket.emit('message', {
        text: usersInRoomSummary
    })
}

将用户加入Socket.IO房间很简单，只要调用socket对象上的join方法就行。然后程序就会把相关细节向这个用户及同一房间中的其他用户发送。程序会让用户知道有哪些用户在这个房间里，还会让其他用户知道这个用户进来了。

// 更名请求的处理逻辑
function handleNameChangeAttempts(socket, nickNames, namesUsed){
    // 添加nameAttempt事件的监听器
    socket.on('nameAttempt', function(name){
        if(name.indexOf('Guest') == 0){
            socket.emit('nameResult', {
                success: false,
                message: 'Names cannot begin with "Guest".'
            });
        }else{
            if(namesUsed.indexOf(name) == -1){
                // 昵称未被占用，注册昵称
                var previousName = nickNames[socket.id];
                var previousNameIndex = namesUsed.indexOf(previousName);
                namesUsed.push(name);
                nickNames[socket.id] = name;
                delete namesUsed[previousNameIndex];
                socket.emit('nameResult', {
                    success: true,
                    name: name
                });
                socket.broadcast.to(currentRoom[socket.id]).emit('message', {
                    text: previousName + 'is now known as' + name + '.'
                });
            }else{
                // 昵称被占用，给客户端发送错误信息
                socket.emit('nameResult', {
                    success: false,
                    message: 'That name is already in use'
                })
            }
        }
    })
}

// 发送聊天消息
function handleMessageBroadcasting(socket) {
    socket.on('message', function(message){
        socket.broadcast.to(message.room).emit('message', {
            text: nickNames[socket.id] + ':' + message.text
        })
    })
}

// 创建房间
function hanleRoomJoining(socket) {
    socket.on('join', function(room){
        socket.leave(currentRoom[socket.id]);
        joinRoom(socket, room.newRoom);
    })
}

function handleClientDisConnection(socket) {
    socket.on('disconnect', function() {
        var nameIndex = namesUsed.indexOf(nickNames[socket.id]);
        delete namesUsed[nameIndex];
        delete nickNames[socket.id];
    });
}

客户端js配置

客户端js需要实现以下功能：

  1. 向服务器发送用户的消息和昵称/房间变更请求；
  2. 显示其他用户的消息，以及可用房间的列表。
var Chat = function(socket) {
    this.socket = socket;
}
// 发送聊天信息的函数
Chat.prototype.sendMessage = function(room, text){
    var message = {
        room: room,
        text: text
    };
    this.socket.emit('message', message);
}
// 变更房间的函数
Chat.prototype.changeRoom = function(room) {
    this.socket.emit('join', {
        newRoom: room
    })
}
// 处理聊天命令
Chat.prototype.processCommand = function(command){
    var words = command.split(' ');
    var command = words[0].sustring(1, words[0].length).toLowerCase();
    var message = false;

    switch(command){
        case 'join':
            words.shift();
            var room = words.join(' ');
            this.changeRoom(room);
            break;
        case 'nick':
            words.shift();
            var name = words.join(' ');
            this.socket.emit('nameAttempt', name);
            break;
        default: 
            message = 'Unrecognized command.';
            break;
    }
    return message;
}

function divEscapedContentElement(message) {
    return $('<div></div>').text(message);
}

function divSystemContentElement(message) {
    return $('<div></div>').html('<i>' + message + '</i>');
}

下一个要加到chat_ui.js中的函数是用来处理用户输入的。如果用户输入的内容以斜杠（/）开头，它会将其作为聊天命令处理。如果不是，就作为聊天消息发送给服务器并广播给其他用户，并添加到用户所在聊天室的聊天文本中。

// 处理原始的用户输入
function processUserInput(chatApp, socket) {
    var message = $('#send-message').val();
    var systemMessage;
    if(message.charAt[0] == '/') {
        systemMessage = chatApp.processCommand(message);
        if(systemMessage) {
            $('#messages').append(divSystemContentElement(systemMessage));
        }
    } else {
        chatApp.sendMessage($('#room').text(), message);
        $('#messages').append(divEscapedContentElement(message));
        $('#messages').scrollTop($('#messages').prop('scrollHeight'));
    }
    $('#send-message').val('');
}

辅助函数现在已经定义好了，你还需要添加下面这个代码清单中的逻辑，它要在用户的浏览器加载完页面后执行。这段代码会对客户端的Socket.IO事件处理进行初始化。

// 客户端程序初始化逻辑
var socket = io.connect();
$(document).ready(function() {
    var chatApp = new Chat(socket);
    socket.on('nameResult', function(result) {
        var message;
        if(result.success) {
            message = 'You are now known as' + result.name + '.';
        }else{
            message = result.message;
        }
        $('#messages').append(divSystemContentElement(message));
    });
    socket.on('joinResult', function(result) {
        $('#room').text(result.room);
        $('#messages').append(divSystemContentElement('Room changed.'));
    });
    socket.on('message', function(message){
        var newElement = $('<div></div>').text(message.text);
        $('#messages').append(newElement);
    });
    socket.on('rooms', function(rooms){
        $('#room-list').empty();
        for(var room in rooms){
            room = room.substring(1, room.length);
            if(room != ''){
                $('#room-list').append(divEscapedContentElement(room));
            }
        }
        // 点击房间名可以换到那个房间中
        $('#room-list div').click(function(){
            chatApp.processCommand('/join' + $(this).text());
            $('#send-message').focus();
        })
    });
    setInterval(function(){
        socket.emit('rooms');
    }, 1000);
    $('#send-message').focus();
    $('#send-form').submit(function(event) {
        processUserInput(chatApp, socket);
        return false;
    });
});

so 运行~

上一篇 下一篇

猜你喜欢

热点阅读