聊天室入门实战（node，socket.io实现)--第二章（美化，图片发送，登录提示，认证）

最新推荐文章于 2024-04-26 17:44:53 发布

neuqzxy

最新推荐文章于 2024-04-26 17:44:53 发布

阅读量2.1k

点赞数 1

分类专栏： chat聊天实战文章标签： node.js socket.io 聊天室 jquery 实战

本文链接：https://blog.csdn.net/NEUQ_zxy/article/details/76836799

版权

项目已经部署，请访问： "chat.mycollagelife.com"

这是整个实战系列的第二章，建议先阅读第一章，这一章是基于第一章基础改进的，实现了界面的美化，图片的发送，好友登录的提示，以及登录认证等功能，实现的结果如图：

登录认证：

登录：

好友上线通知：

图片发送：

项目源码:

该项目已经上传至Github https://github.com/neuqzxy/chat 觉得可以的话给个星星吧现在github上有original文件夹是我已经完成的项目，而chat文件夹下是与博客同步的

技术要求：首先你需要能够看懂第一章的内容，其次这一章我使用了bootstrap，你需要对bootstrap有一个大致的了解，这一章是第一章的升级，最好先看完第一章。

使用bootstrap美化登录界面

1. 先下载bootstrap文件，我们打开bootstrap官网下载bootstrap，我们下载用于生产环境的：

下载后解压

2. 拷贝我们第一章的全部内容，新建一个chat++文件夹，粘贴进去。然后进入解压后的bootstrap中，拷贝bootstrap.js和bootstrap.css到我们的项目文件中，然后在chat.html中引用，如下图：

3. 美化登录界面

我们进入bootstrap官网，在全局css样式里找到内联表单这一栏，拷贝：

然后修改一下：

由于我们的登录不是提交表单，所以把form改为div标签，避免不必要的麻烦。把button类型改成button 类btn-info是控制按钮颜色的，btn-lg表示最大的按钮，修改一下文字内容和id就可以了，修改后的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="JavaScripts/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="stylesheets/bootstrap.css">
    <script src="JavaScripts/bootstrap.js"></script>
    <script src="JavaScripts/main.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        html,body {
            background: #ccc;
            padding: 20px 0 20px 0;
        }
        h1 {
            text-align: center;
        }
        .login {
            text-align: center;
        }
        .chatinput {
            display: block;
            width: 100%;
            position: absolute;
            min-height: 30px;
            bottom: 0;
        }
        #content {
            height: auto;
        }
    </style>
</head>
<body>
<div id="loginbox">
    <h1>登录</h1>
    <hr>
    <div class="login">
        <div class="form-inline">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入用户名">
            </div>
            <br><br>
            <button type="button" class="btn btn-info btn-lg" id="loginbutton">登录</button>
        </div>
    </div>
</div>
<div style="display: none;" id="chatbox">
    <div id="content"></div>
    <input type="text" placeholder="saying somgthing" class="chatinput" id="chatinput">
</div>
</body>
</html>

登录界面的美化就暂时到这里了，我们来美化欢迎文字

美化欢迎提醒

我们现在的欢迎只是一个p标签很丑，还永远保留在那，我们希望可以有一个弹窗的提醒，然后再chat界面还有一行文字显示是谁的聊天室界面，我们来完成吧。

bootstrap组件中的警告框非常合适：

我们就使用可关闭的警告框，显示2s后关闭。点击《bootstrap警告框插件》找到用法，我们选择蓝色的那一款警告框，对应的类是alert-info

因为我们需要自动控制它的关闭，所以要加上一些属性，在《bootstrap警告框插件》中已经很清楚的说明了需要额外添加的属性：

我们最终的样式如下：

<div style="display: none;" id="chatbox">
    <div class="alert alert-info alert-dismissible fade in" role="alert" id="myalert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div id="content"></div>
    <input type="text" placeholder="saying somgthing" class="chatinput" id="chatinput">
</div>

将其放在#content的上面，接下来就是控制显示了，如上图有两个方法alert()和alert("close")，我们就使用这两个方法控制。

因为这是一开始的欢迎提醒，所以自然要在beginChat这个登录成功后就调用的函数里写，修改我们原来的欢迎：

    let beginChat = function () {
        /**
         * 1.隐藏登录框，取消它绑定的事件
         * 2.显示聊天界面
         */
        $("#loginbox").hide('slow');
        _$inputname.off('keyup');
        _$loginButton.off('click');

        /**
         * 显示聊天界面，并显示一行文字，表示是谁的聊天界面
         * 一个2s的弹框，显示欢迎字样
         * 这里我使用了ES6的语法``中可以使用${}在里面写的变量可以直接被浏览器渲染
         */
        $(`<h2 style="text-align: center">${_username}的聊天室</h2>`).insertBefore($("#content"));
        $(`<strong>欢迎你</strong><span>${_username}!</span>`).insertAfter($('#myalert button'));
        $('#myalert').alert();
        setTimeout(function () {
            $('#myalert').alert('close');
        },2000);
        $("#chatbox").show('slow');
    };<