node.js制作简单的聊天室

最新推荐文章于 2022-11-19 15:20:38 发布

evail_

最新推荐文章于 2022-11-19 15:20:38 发布

阅读量340

点赞数 1

分类专栏： web 文章标签： js node.js

本文链接：https://blog.csdn.net/evail_/article/details/107621128

版权

web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

node.js制作简单的聊天室

效果图

在这里插入图片描述

客户端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 400px;
            border: 1px #ccc solid;
            margin: 100px auto;
        }

        .show {
            width: 400px;
            height: 400px;
            overflow: auto;
            background-color: #999;
        }

        .show div {
            overflow: hidden;
            margin: 10px;
        }

        .show div span {
            word-wrap: break-word;
            padding: 10px 10px;
            line-height: 20px;
            overflow: hidden;
            max-width: 350px;
            border-radius: 10px;
        }

        .left {
            float: left;
            background-color: lightblue;
        }

        .right {
            background-color: lightpink;
            float: right;
        }

        .inp {
            width: 320px;
            height: 20px;
            outline: none;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="show">
        </div>
        <input type="text" class="inp">
        <button class="btn">发送</button>
    </div>
    <script src="socket.io/socket.io.js"></script>
    <script>
        var time = Date.now();
        var socket = io.connect("http://10.20.158.17:3000");
        var inp = document.querySelector('.inp');
        var show = document.querySelector('.show');
        var btn = document.querySelector('.btn');
        var timer = null
        btn.onclick = function () {
            if (!inp.value) {
                return
            }
            var div = document.createElement('div');
            div.innerHTML = '<span class="right">' + inp.value + '</span>'
            show.appendChild(div);
            socket.emit("sentToServer", {
                msg: inp.value,
                time: time
            });
            inp.value = '';
            show.scrollTop = show.scrollHeight;
        }
        socket.on("sendToClient", message => {
            var div2 = document.createElement('div');
            if (message.time == time) {
                return
            } else {
                div2.innerHTML = '<span class="left">' + message.msg + '</span>'

                show.appendChild(div2);
            }

            show.scrollTop = show.scrollHeight;
        });
    </script>
</body>

</html>

服务端

const express = require('express');
const app     = express();
const server  = require('http').createServer(app);
const io      = require('socket.io')(server);
// 设置静态文件托管目录
app.use(express.static('node_modules'));
let time = 0
//监听客户端链接,回调函数会传递本次链接的socket
io.on('connection', socket => {  
    // 监听客户端发送的信息
    console.log(socket.id)
    socket.on("sentToServer", message => {
        // 给客户端返回信息
        io.emit("sendToClient", message);
    });
});
// 监听连接断开事件
server.listen(3000);