使用nodejs搭建你自己的专属web聊天室

最新推荐文章于 2024-08-03 10:09:20 发布

q705597001

最新推荐文章于 2024-08-03 10:09:20 发布

阅读量4.6k

点赞数 3

文章标签： socket express 聊天 nodejs web

本文链接：https://blog.csdn.net/q705597001/article/details/65442074

版权

前言

前断时间在学习nodejs，自己闲来无事，在网上搜索了一些资料自己搭建了一个属于自己的web聊天室项目。现在把自己的开发过程和心得和大家分享，希望其中涉及到的一些知识对你有用。

项目开源地址：https://github.com/yunchen132/node-websocket-Chatroom

开发工具准备

安装nodejs，你可以在nodejs官网下载安装适合自己操作系统的版本。#nodejs官网

使用npm安装开发环境依赖。在这里我使用了express，socket.io模块。

功能介绍

支持图片发送
支持表情发送
支持键盘回车发送信息
支持在线用户统计和用户列表:

我的目录结构

server.js代码：

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    users = [];

app.use('/', express.static(__dirname + '/app'));

server.listen(process.env.PORT || 3000);
io.sockets.on('connection', function(socket) {
    //创建用户链接
    socket.on('login', function(user) {
        console.log(user);
        if (isHave(user)) {
            socket.emit('nickExisted');
        } else {
            var address=socket.handshake.address.address+":"+socket.handshake.address.port;
            user.address=address;
            socket.userIndex = users.length;
            socket.user = user;
            users.push(user);
            socket.emit('loginSuccess');
            io.sockets.emit('system', user,users, users.length, 'login');
        };
    });
    //用户注销链接
    socket.on('disconnect', function() {
        if (socket.user != null) {
            users.splice(socket.userIndex, 1);
            socket.broadcast.emit('system', socket.user,users,users.length, 'logout');
        }
    });
    //新建消息
    socket.on('postMsg', function(msg, color) {
        socket.broadcast.emit('newMsg', socket.user, msg, color);
    });
    //新建图片信息
    socket.on('img', function(imgData, color) {
        socket.broadcast.emit('newImg', socket.user, imgData, color);
    });
    //判断用户名是否存在
    function isHave(user) {
        var flag=false;
        for(var i=0;i<users.length;i++){
            if(users[i].nickName==user.nickName){
                flag=true;
                break;
            }
        }
        return flag;
    }
});

index.html代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="author" content="cleverqin">
        <meta name="description" content="Chat聊天室,使用nodejs和websocket构建的网页聊天室">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Chat聊天室</title>
        <link rel="stylesheet" href="styles/main.css">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div class='chat-box'>
            <div class='user-box'>
                <div class='tag'>在线用户：</div>
                <ul id='online-list'></ul>
            </div>
            <div class="wrapper">
                <div class="banner">
                    <div class='chat-title'>欢迎进入Chat聊天室</div>
                    <span id="status"></span>
                </div>
                <div id="historyMsg"></div>
                <div class="controls" >
                    <div class="items">
                        <input id="colorStyle" type="color" placeHolder='#000' title="font color" />
                        <input id="emoji" type="button" value="表情" title="emoji" />
                        <label for="sendImage" class="imageLable">
                            <input type="button" value="图片"  />
                            <input id="sendImage" type="file" value=""/>
                        </label>
                        <input id="clearBtn" type="button" value="清除聊天记录" title="clear screen" />
                    </div>
                    <textarea id="messageInput" placeHolder="请输入消息....."></textarea>
                    <input id="sendBtn" type="button" value="发送">
                    <div id="emojiWrapper">
                    </div>
                </div>
            </div>
        </div>
        <div id="loginWrapper">
            <p id="info">链接服务器...</p>
            <div id="nickWrapper" >
                <div class='login-form'>
                    <div class='form-group'>
                        <label>选择头像：</label>
                        <div class="select-pic-box form-control">
                            <ul class="img-list">
                                <li class="checked"><img src="content/headPic/1.jpg"></li>
                                <li><img src="content/headPic/2.jpg"></li>
                                <li><img src="content/headPic/3.jpg"></li>
                                <li><img src="content/headPic/4.jpg"></li>
                                <li><img src="content/headPic/5.jpg"></li>
                                <li><img src="content/headPic/6.jpg"></li>
                                <li><img src="content/headPic/7.jpg"></li>
                                <li><img src="content/headPic/8.jpg"></li>
                                <li><img src="content/headPic/9.jpg"></li>
                                <li><img src="content/headPic/10.jpg"></li>
                            </ul>
                        </div>
                    </div>
                    <div class='form-group'>
                        <label>填写昵称：</label>
                        <div class='form-control'><input type="text" placeHolder="请输入你的昵称" id="nicknameInput" /></div>
                    </div>
                    <div class="form-group btn-box"><input type="button" value="确定" id="loginBtn" /></div>
                </div>
            </div>
        </div>
        <script src="scripts/jquery-1.11.1.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="scripts/canvas.js"></script>
        <script src="scripts/client.js"></script>
    </body>
</html>

client.js代码

window.onload = function() {
    var hichat = new MyChat();
    hichat.init();
};
var MyChat = function() {
    this.socket = null;
};
MyChat.prototype = {
    init: function() {
        var that = this;
        var _pic=document.body.querySelectorAll("#nickWrapper .img-list li.checked img")[0].src;
        var curUser={
            nickName:"我",
            pic:_pic,
            address:""
        }
        this.socket = io.connect();
        this.socket.on('connect', function() {
            document.getElementById('info').textContent = '请输入一个昵称：';
            document.getElementById('nickWrapper').style.display = 'block';
            document.getElementById('nicknameInput').focus();
        });
        this.socket.on('nickExisted', function() {
            document.getElementById('info').textContent = '该昵称已被使用，请选用其他昵称';
        });
        this.socket.on('loginSuccess', function() {
            document.title = 'Chat聊天室 | ' + document.getElementById('nicknameInput').value;
            document.getElementById('loginWrapper').style.display = 'none';
            document.getElementById('messageInput').focus();
            curUser.nickName="我";
        });
        this.socket.on('error', function(err) {
            if (document.getElementById('loginWrapper').style.display == 'none') {
                document.getElementById('status').textContent = '链接失败！';
            } else {
                document.getElementById('info').textContent = '链接失败！';
            }
        });
        this.socket.on('system', function(user,users, userCount, type) {
            var msg = user.nickName + (type == 'login' ? ' 加入聊天室' : ' 离开聊天室');
            that._displayMsg(user, msg, 'red','sys');
            document.getElementById('status').innerHTML = "当前在线用户:<span class='num-tag'>"+userCount+"</span>人";
            var listDiv=document.getElementById("online-list");
            var str="";
            for (var i=0;i<users.length;i++){
                str+="<li class='user-span' title='"+users[i].nickName+"'><img src='"+users[i].pic+"'><div>"+users[i].nickName+"</div></li>";
            }
            listDiv.innerHTML=str;
        });
        this.socket.on('newMsg', function(user, msg, color) {
            that._displayMsg(user, msg, color,"msg");
        });
        this.socket.on('newImg', function(user, img, color) {
            that._displayMsg(user,img,color,"img");
        });
        document.getElementById('loginBtn').addEventListener('click', function() {
            var nickName = document.getElementById('nicknameInput').value;
            var pic=document.body.querySelectorAll("#nickWrapper .img-list li.checked img")[0].src;
            if (nickName.trim().length != 0&&nickName.trim()!="我") {
                curUser={
                    nickName:nickName,
                    pic:pic
                }
                that.socket.emit('login', curUser);
            } else {
                document.getElementById('nicknameInput').focus();
                document.getElementById('info').textContent = '请输入昵称，昵称不能为空不能为’我';
            };
        }, false);
        document.getElementById('nicknameInput').addEventListener('keyup', function(e) {
            if (e.keyCode == 13) {
                var nickName = document.getElementById('nicknameInput').value;
                var pic=document.body.querySelectorAll("#nickWrapper .img-list li.checked img")[0].src;
                if (nickName.trim().length != 0) {
                    curUser={
                        nickName:nickName,
                        pic:pic
                    }
                    that.socket.emit('login', curUser);
                };
            };
        }, false);
        document.getElementById('sendBtn').addEventListener('click', function() {
            var messageInput = document.getElementById('messageInput'),
                msg = messageInput.value,
                color = document.getElementById('colorStyle').value;
            messageInput.value = '';
            messageInput.focus();
            if (msg.trim().length != 0) {
                that.socket.emit('postMsg', msg, color);
                that._displayMsg(curUser, msg, color,"msg");
                return;
            };
        }, false);
        document.getElementById('messageInput').addEventListener('keyup', function(e) {
            var messageInput = document.getElementById('messageInput'),
                msg = messageInput.value,
                color = document.getElementById('colorStyle').value;
            if (e.keyCode == 13 && msg.trim().length != 0) {
                messageInput.value = '';
                that.socket.emit('postMsg', msg, color);
                that._displayMsg(curUser, msg, color,"msg");
            };
        }, false);
        document.getElementById('clearBtn').addEventListener('click', function() {
            document.getElementById('historyMsg').innerHTML = '';
        }, false);
        document.getElementById('sendImage').addEventListener('change', function() {
            if (this.files.length != 0) {
                var file = this.files[0],
                    reader = new FileReader(),
                    color = document.getElementById('colorStyle').value;
                if (!reader) {
                    that._displayMsg(curUser, '你的浏览器不支持文件读取！', 'red',"sys");
                    this.value = '';
                    return;
                };
                reader.onload = function(e) {
                    this.value = '';
                    that.socket.emit('img', e.target.result, color);
                    that._displayMsg(curUser, e.target.result, color,"img");
                };
                reader.readAsDataURL(file);
            };
        }, false);
        this._initialEmoji();
        this.initSelectPic();
        document.getElementById('emoji').addEventListener('click', function(e) {
            var emojiwrapper = document.getElementById('emojiWrapper');
            emojiwrapper.style.display = 'block';
            e.stopPropagation();
        }, false);
        document.body.addEventListener('click', function(e) {
            var emojiwrapper = document.getElementById('emojiWrapper');
            if (e.target != emojiwrapper) {
                emojiwrapper.style.display = 'none';
            };
        });
        document.getElementById('emojiWrapper').addEventListener('click', function(e) {
            var target = e.target;
            if (target.nodeName.toLowerCase() == 'img') {
                var messageInput = document.getElementById('messageInput');
                messageInput.focus();
                messageInput.value = messageInput.value + '[emoji:' + target.title + ']';
            };
        }, false);

    },
    //初始化表情
    _initialEmoji: function() {
        var emojiContainer = document.getElementById('emojiWrapper'),
            docFragment = document.createDocumentFragment();
        for (var i = 69; i > 0; i--) {
            var emojiItem = document.createElement('img');
            emojiItem.src = '../content/emoji/' + i + '.gif';
            emojiItem.title = i;
            docFragment.appendChild(emojiItem);
        };
        emojiContainer.appendChild(docFragment);
    },
    _displayMsg:function(user,msg,color,type) {
        var container = document.getElementById('historyMsg'),
            msgToDisplay = document.createElement('p'),
            date = new Date().toTimeString().substr(0, 8),
            msgDiv="",
            userDiv="";
        msgToDisplay.style.color = color || '#000';
        if(type=="sys"){
            msgDiv=msg;
            msgToDisplay.className="sys";
            msgToDisplay.innerHTML = "系统消息" + '<span class="timespan">(' + date + '): </span>' + msgDiv;
        }else if(type=="img"){
            userDiv="<div class='user-msg'><img src='"+user.pic+"' time='"+date+"' /><span>"+user.nickName+"</span></div>"
            if(user.nickName=="我"){
                msgToDisplay.className="me";
                userDiv="<div class='user-msg'><span>"+user.nickName+"</span><img src='"+user.pic+"' time='"+date+"' /></div>"
            }
            msgDiv="<div class='msg-box'><div class=msg-content><span class='msg-arrow'></span><a href='"+msg+"' target='_blank'><img src='"+msg+"'/></a></div></div>";
            msgToDisplay.innerHTML =userDiv+ msgDiv;
        }else {
            msg = this._showEmoji(msg);
            msgDiv="<div class='msg-box'><div class=msg-content><span class='msg-arrow'></span>"+msg+"</div></div>";
            userDiv="<div class='user-msg'><img src='"+user.pic+"' time='"+date+"' /><span>"+user.nickName+"</span></div>"
            if(user.nickName=="我"){
                msgToDisplay.className="me";
                userDiv="<div class='user-msg'><span>"+user.nickName+"</span><img src='"+user.pic+"' time='"+date+"' /></div>"
            }
            msgToDisplay.innerHTML = userDiv + msgDiv;
        }
        container.appendChild(msgToDisplay);
        container.scrollTop = container.scrollHeight;
    },
    //匹配表情信息
    _showEmoji: function(msg) {
        var match, result = msg,
            reg = /\[emoji:\d+\]/g,
            emojiIndex,
            totalEmojiNum = document.getElementById('emojiWrapper').children.length;
        while (match = reg.exec(msg)) {
            emojiIndex = match[0].slice(7, -1);
            if (emojiIndex > totalEmojiNum) {
                result = result.replace(match[0], '[X]');
            } else {
                result = result.replace(match[0], '<img class="emoji" src="../content/emoji/' + emojiIndex + '.gif" />');
            };
        };
        return result;
    },
    initSelectPic:function () {
        var imglist=document.body.querySelectorAll("#nickWrapper .img-list li");
        $(imglist).on("click",function (e) {
            e.stopPropagation();
            $(imglist).removeClass("checked");
            $(this).addClass("checked");
        })
    }
};

项目启动

使用’npm‘安装项目依赖模块
使用’node server.js‘启动服务
最后打开浏览器访问 http://localhost:3000

心得总结

这是我使用了express作为服务器路由框架，socket.io构建socket服务器。这其中涉及的了一些socket知识的。在开发过程中也遇到了一些问题。在这里我并未对前端界面显示作优化，仅使用了jQuery进行dom更新。当然你也可以用react，angular，vue来构建的前端界面。当然这里你也可以实现聊天室的创建，单用户的链接服务，单用户之间的私聊功能。甚至创建一个在线的网页客服系统。这里你可以参考socket.io的更多知识。具体请参考socket.io文档