NodeJS 实战(二) - 聊天室②

上一博文 NodeJS 实战(二) - 聊天室① 介绍和实现聊天室静态资源的架构， 这一次来加入真正的实时聊天功能吧。

 

在server.js需要加入新的模块，后续会来定义这个模块，这个模块是基于socket.io主要是用来支持

var chatServer = require('./lib/chat_server');
chatServer.listen(server)

 

在lib文件夹里来定义这个模块（chat_server.js）吧

首先引用nodejs socket.io 模块

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

 关键代码的加入

exports.listen = function(server) {
    io = socketio.listen(server); //启动socketio监听
    io.set('log level', 1);
    io.sockets.on('connection', function (socket) {
        guestNumber = assignGuestName(socket, guestNumber,
            nickNames, namesUsed);//初始化新加入用户名称
        handleMessageBroadcasting(socket, nickNames);//处理用户发送的消息
        socket.on('rooms', function() {
            socket.emit('rooms', io.sockets.manager.rooms);
        });
    });
};

 

//设置新的guestName
function assignGuestName(socket, guestNumber, nickNames, namesUsed) {
    var name = 'Guest' + guestNumber;
    nickNames[socket.id] = name;
    socket.emit('nameResult', {
        success: true,
        name: name
    });
    namesUsed.push(name);
    return guestNumber + 1;
}

//处理消息function
function handleMessageBroadcasting(socket) {
    socket.on('message', function (message) {
        socket.broadcast.to(message.room).emit('message', {
            text: nickNames[socket.id] + ': ' + message.text
        });
    });
}

在javascript目录里加入前台js  chat.js

var Chat = function(socket) {
    this.socket = socket;
};

//消息处理方法
Chat.prototype.sendMessage = function(room, text) {
    var message = {
        room: room,
        text: text
    };
    this.socket.emit('message', message);
};

在javascript目录里加入前台js  chat_ui.js

function divEscapedContentElement(message) {
    return $('
').text(message);
}
function divSystemContentElement(message) {
    return $('
').html('' + message + '');
}

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('');
}

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 = $('
').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() {
        processUserInput(chatApp, socket);
        return false;
    });
});

最后记得在index.html里引用这2个js 前一篇有提到过

好了，，， node server.js 吧

最简单的聊天室可以聊天了

 

转载于:https://www.cnblogs.com/onelee/p/3424840.html