Node.js基于浏览器聊天室

最新推荐文章于 2023-04-17 17:37:19 发布

曹渊说技术

最新推荐文章于 2023-04-17 17:37:19 发布

阅读量965

点赞数

分类专栏： node.js linux 文章标签：浏览器聊天 node.js

本文链接：https://blog.csdn.net/caopeng26/article/details/52269789

版权

linux 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

node.js

14 篇文章 0 订阅

订阅专栏

1、新建一个index.html文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="javascripts/jquery-1.11.1.min.js"></script>
    <script src="javascripts/socket.io-1.4.5.js"></script>
    <style>
      *{padding: 0;margin: 0}
      p{}
        table {
            width: 100%;
        }
        .p2{background: pink;}
        .p1{background: rgb(106, 216, 255);}
        .p1,.p2{border: 1px solid pink;padding: 10px;border-radius: 5px;display:inline-block}
        span{margin: 5px 0px;}
        table.tool {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
        }

        #content {
            height: auto;
            padding: 10px;
            padding-bottom: 32px;
        }

        #content tr {
            margin-bottom: 10px;
        }
        #textContent {
            border: 1px solid rgb(106, 216, 255);
            border-radius: 5px;
            padding: 6px;
        }

        .left {
            width: 75%;
        }

        #send {
            width: auto;
            padding: 2px 12px;
            margin: 0 10px;
            line-height: 26px !important;
            border-radius: 5px;
            font-weight: bold;
            color: white;
            border: 0px;
            background-color:rgb(106, 216, 255);
        }
        #findmsg {
            width: auto;
            padding: 2px 12px;
            line-height: 26px !important;
            border-radius: 5px;
            font-weight: bold;
            color: white;
            border: 0px;
            background-color:pink;
        }
        .timer {
            display: block;
            text-align: center;
        }
    </style>
</head>
<body style="background: url(images/47.jpg) ;background-repeat: no-repeat;background-size:100%">
<div>
    <table id="content">
    </table>
</div>

<table class="tool">
    <tr>
        <td class="left">
            <div id="textContent" contenteditable="true" type="text"></div>
        </td>
        <td>
            <button id="send">发送</button>
<!--
            <button id="findmsg">查看聊天记录</button>
          -->
        </td>
    </tr><div id="nav"></div>
</table>

<script>
    var socket = io.connect('http://192.168.105.253:3000');
    var userName = "访客某某";
    socket.on('connect', function () {
        userName = prompt("请输入你的姓名?") || userName;
        socket.emit('join', userName);
    });
    socket.on('chat', function (user, data) {
        var p = document.createElement('tr');
        var direct = 'align-left';
        if (user === userName) {
            direct = 'align-right';
            p.innerHTML = '<td><p>' + user + '</p><p class="p1">' + data + '</p></td>';
        } else {
            p.innerHTML = '<td style="text-align:right"><p>' + user + '</p><p class="p2">' + data + '</p></td>';
        }
        p.className = direct;
        $('#content').appendChild(p);
    });

    $('#send').addEventListener('click', function (target) {
        var content = $('#textContent').innerHTML;
        if (content = content.replace(" ", "")) {
            socket.emit('sendMSG', content);
            $('#textContent').innerHTML = "";
        }
    });

    $('#findmsg').addEventListener('click', function (target) {
            socket.emit('getMSG', content);
    });
    function $(flag) {
        return document.querySelector(flag);
    }
</script>

</body>
</html>

2、新建一个chat.js文件，代码如下：

var express = require('express');
var router = express.Router();
var socket_io = require('socket.io');
 var db = require('../model/mongoose');
/* GET users listing. */
router.get('/', function (req, res, next) {
    res.send('respond with a resource');
});


router.prepareSocketIO = function (server) {
    var io = socket_io.listen(server);
    var clientList = [];
    var interlocutors = [];
    io.sockets.on('connection', function (socket) {//连接

        clientList.push(socket);
        console.log("连接人数：" + clientList.length);
        console.log("连接数据" + socket);
        socket.on('join', function (user) {//获取名称

            socket.user = user;

            var socketusers ={ user_name:user}
            db.socketuserModel.findOne(socketusers,function(error, result){
                console.log('he'+result+error);
                if(result ==null ){

                    db.socketuserModel.create(socketusers, function(error){});

                }
            });

            //socket.emit('state', 'SERVER', true);
            //socket.broadcast.emit('state', 'SERVER', user + '上线了');//广播名字
        });
        socket.on('sendMSG', function (msg) {//发送内容存入数据库
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var times = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
            var socketusersmsg ={ user_name:socket.user,send_msg:msg,send_time:times}
            db.socketusermsgModel.create(socketusersmsg, function(error){});
            socket.emit('chat', socket.user, msg);
            socket.broadcast.emit('chat', socket.user, msg);//广播内容
        });

         socket.on('getMSG', function (msg) {//获取聊天记录

            var usersmsg ={ user_name:socket.user}
            db.socketusermsgModel.find(usersmsg,function(error, result){
                console.log('he'+result+error);
                for(var i=0;i<result.length;i++){
                    console.log(result[i].send_msg);
                }
            })//.sort({send_time:-1}).limit(1);
            //socket.emit('chat', socket.user, msg);
            //socket.broadcast.emit('chat', socket.user, msg);
        });
    });

};

module.exports = router;

曹渊说技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Node.js基于浏览器聊天室

1、新建一个index.html文件，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src
复制链接

扫一扫