nodej实现简单多人在线聊天室

这个聊天室室只是实现简单的聊天功能样式不怎么好看，喜欢的人可以拿去修改完善一下，就可以成型了。
聊天的记录我保存在文件里，方便查看！

1.搭建运行环境
安装

npm i express --save
npm i socket.io --save

创建src目录用于存放自己要写的文件，在目录下建src/chat.html、src/chatHistory.txt两个文件。
建一个server.js作为后台服务器：

//引入程序包
var express = require('express')
var path = require('path')
var app = express()
var server = require('http').createServer(app)
var io = require('socket.io').listen(server)
var fs = require('fs')

//设置日志级别
// io.set('log level', 1);

//WebSocket连接监听
io.on('connection', function (socket) {
  //通知客户端已连接
  socket.emit('open')

  // 构造客户端对象
  var client = {
    socket:socket,
    name: false,
    color:getColor()
  }

  // 对message事件的监听
  socket.on('message', function(msg){
    // 设置时间
    var obj = {
        time:getTime(),
        color:client.color
    }

    // 第一次连接，以第一条消息作为用户名
    if(!client.name){
        client.name = msg
        obj['text']=client.name
        obj['author']='System'
        obj['type']='welcome'
        console.log(client.name + ' login')

        //返回欢迎语
        socket.emit('system',obj)
        //广播新用户已登陆
        socket.broadcast.emit('system',obj)
     }else {
        //如果不是第一次的连接，正常的聊天消息
        obj['text'] = msg
        obj['author'] = client.name
        obj['type'] = 'message'
        // 聊天记录写入文件 fs.writeFile(filename, data, [options], callback)
        // flag: 'a' 改为追加模式 不覆盖前面内容
        filename = 'src/chatHistory.txt'
        data = getTime() + ':' + '\n'+ client.name + ':' + msg + ';' + '\n'
        fs.writeFile(filename, data,{flag:'a'}, function(err){
            if(err) throw err
            console.log('写入成功!')
        })

        // 返回消息（可以省略）
        socket.emit('message',obj)
        // 广播向其他用户发消息
        socket.broadcast.emit('message',obj)
      }
    })

    //监听退出事件
    socket.on('disconnect', function () {  
      var obj = {
        time:getTime(),
        color:client.color,
        author:'System',
        text:client.name,
        type:'disconnect'
      }

        // 广播用户已退出
        socket.broadcast.emit('system',obj)
        console.log(client.name + '离线')
    })

})

// 指定webscoket的客户端的html文件
app.get('/', function(req, res){
    res.sendFile(__dirname + '/src/chat.html')
})

server.listen(3000, function(){
  console.log('port: 3000')
})

var getTime=function(){
  var date = new Date()
  return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
}

var getColor=function(){
  var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
                'orange','blue','blueviolet','brown','burlywood','cadetblue']
  return colors[Math.round(Math.random() * 10000 % colors.length)]
}

chat.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>nodejs在线聊天室</title>
</head>
<style>
    * {
        padding:0px;
        margin:0px;
    }
    body{
        font-family:tahoma;
        font-size:12px;
        margin:10px;
    }
    p {
        line-height:18px;
        padding:2px;
    }
    div {
        width:500px;
    }
    #content { 
        padding:5px; 
        background:#ddd; 
        border-radius:5px;
        border:1px solid #CCC; 
        margin-top:10px; 
        min-height: 300px;
    }
    #input { 
        border-radius:2px; 
        border:1px solid #ccc;
        margin-top:10px; 
        padding:5px; 
        width:100%;  
    }
    #status { 
        width:100px; 
        display:block; 
        float:left; 
        margin-top:15px; 
    }
    h2{
        text-align: center;
        color: blue;
    }
    .input-box{
        position: fixed;
        bottom: 10%;
        left: 0;
    }
</style>
<body>
    <div id="content"></div>
    <div class="input-box">
       <span id="status">加载中....</span>
       <input type="text" id="input"/>
    </div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
    $(function () {
        var content = $('#content')
        var status = $('#status')
        var input = $('#input')
        var myName = false

        //建立websocket连接
        socket = io.connect('http://localhost:3000')
        
        //收到server的连接确认
        socket.on('open',function(){
            status.text('输入一个昵称:')
        })

        //监听system事件，判断welcome或者disconnect，打印系统消息信息
        socket.on('system',function(json){
            var p = ''
            if (json.type === 'welcome'){
                if(myName==json.text) status.text(myName + ': ').css('color', json.color)
                p = '<p style="background:'+json.color+'">系统消息 @ '+ json.time+ ' : 欢迎 ' + json.text +'</p>'
            }else if(json.type == 'disconnect'){
                p = '<p style="background:'+json.color+'">系统消息 @ '+ json.time + ':'+ json.text + ' 下线 ' +'</p>'
            }
            content.append(p)
        })

        //监听message事件，打印消息信息
        socket.on('message',function(json){
            var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> : '+ json.time+ ' : '+json.text+'</p>'
            content.append(p)
        })

        //通过“回车”提交聊天信息
        input.keydown(function(e) {
            if (e.keyCode === 13) {
                var msg = $(this).val()
                if (!msg) return
                socket.send(msg)
                $(this).val('')
                if (myName === false) {
                    myName = msg
                }
            }
        })
    })
</script>

在这里插入图片描述

聊天记录写入文件：

没有录屏工具，调试的话自己调就行，nodejs就分享这些了，我感觉做的还有一些问题

nodej实现简单多人在线聊天室

猜你喜欢