项目已经部署,请访问: "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');
};<