web网页聊天室-智码星河

效果演示

Node+socket.io简单的网页聊天室

源码在安装好依赖后可以一键复制直接运行，因为涉及nodeJs，步骤比较多，代码里面我都写了注释并且标注了步骤序号，一共大概17步，帮助理解。

01. 创建文件夹webChat，里面创建有index.html和serve.js

02. 根目录下输入cmd，安装express和socket.io

npm install express

npm install --save socket.io，

03. 打开index.html，复制如下代码

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style-type: none;
            margin-bottom: 15px;
            background: #8db0f761;
            padding: 5px 10px;
            font-size: 15px;
        }

        .chatBox {
            width: 750px;
            height: 600px;
            border: 2px solid #e5e5e5;
            margin: 2% auto;
        }

        ul {
            height: 500px;
            padding: 20px;
            margin-bottom: 0px;
            overflow-y: auto;
        }

        .iptbox {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #eee;
            height: 80px;
            padding-right: 20px;
        }

        input {
            border: none;
            outline: none;
            width: 90%;
            height: 100%;
            background-color: #eee;
            padding:0 10px;
            font-size: 16px;
        }

        button {
            border: none;
            outline: none;
            width: 9%;
            height: 40px;
            background-color: #ff1f1f;
            color: #fff;
            border-radius: 5px;
        }

        /* 通知类样式 */
        .notice{
            padding: 2px;
            background-color: rgba(234, 234, 234, 0.385);
            font-size: 12px;
            border-radius: 6px;
        }
    </style>
</head>

<body>

    <div class="chatBox">
        <ul id="messages">
            <!-- <li>你好啊！</li> -->
        </ul>

        <div class="iptbox">
            <input placeholder="输入你要发的消息"></input>
            <button onClick="sendBtn()">发送</button>
        </div>
    </div>

    <!-- 07.为了方便操作 引入jq -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 08.前端页面中 引入socket -->
    <script src="/socket.io/socket.io.js"></script>

    <!-- 自己的脚本 -->
    <script>
        // 09.用户输入昵称
        var name = prompt("请输入你的昵称：");
        
        // 10.初始化socket
        let socket = io();
        console.log(socket);

        //11.发送昵称给后端
        socket.emit("join", name)

        // 13.接受到新用户加入事件的处理
        //收到服务器发来的join事件时 往ul中添加一个li 展示某用户加入聊天
        socket.on("join", function (user) {
            $('#messages').append($('<li class="notice">').text("系统："+ user + " 加入了聊天"));
        })

        // 14. 为了区分当前的用户 给网页标题改成当前用户昵称
        document.title = name;

        // 12.往ul中添加消息 每一个消息就是一个li标签
        function addMsgFun(msg,name) {
            $('#messages').append($('<li>').text(`${name}：${msg}`));
        }


        // 15.用户输入消息，然后点击发送按钮 将用户的消息发送给服务器，然后服务器将消息广播给所有的用户
        function sendBtn() {
            // 先获取输入框的内容
            let msg = $(".iptbox input").val();
            // 判断昵称是否为空
            if(!msg){
                return alert("请输入内容");
            }
            // 然后将内容发送给服务器 发送事件为sendMsgFun
            // 发送内容为 消息和昵称 昵称则用于展示在消息前面
            socket.emit("sendMsgFun", msg,name);
            // 然后将输入框的内容清空
            $(".iptbox input").val("");
        }


        // 17. 接收到服务器发来的sendMsgFunServe事件，拿到服务器广播的消息内容
        // 然会调用addMsgFun方法 将新消息呈现在面板中
        socket.on("sendMsgFunServe", function (msg,name) {
            addMsgFun(msg,name)
        })
    </script>
</body>

</html>

04. 在server.js中复制以下代码

var app = require('express')(); //01.引入express库
var http = require('http').Server(app); //02.将express注册到http中


//04.当访问根目录时，跳转到index.html页面
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});


// 05.引入socket
var io = require('socket.io')(http);

var infos = []; // 用于保存用户信息

// 06. 创建socket连接
io.on('connection', function (socket) {
    // 监听join事件，在接收到昵称之后，将该用户的加入聊广播给所有用户
    socket.on("join", function (name) {
        infos[name] = socket
        //服务器通过广播将新用户加入的消息发送给全体成员
        io.emit("join", name)
    })

    // 16. 接收前端发送的消息
    // 监听前端的发送事件 sendMsgFun 前端发来什么 后端就接收并广播什么
    socket.on("sendMsgFun", function (msg,name) {
        //将新消息广播出去 这个就可以让全体成员都看见
        // 服务器发送的事件为 sendMsgFunServe
        io.emit("sendMsgFunServe", msg,name)
    })
});

//03.启动服务开启在3000端口
http.listen(3000, function () {
    console.log('listening on *:3000');
});