login.css
* {
padding: 0;
margin: 0;
font-family: "Microsoft Yahei";
}
html,
body {
width: 100%;
height: 100%;
font-family: "Microsoft Yahei";
display: flex;
justify-content: center;
align-items: center;
}
body {
background: linear-gradient(-135deg, #51D15B, #42A855);
background: -moz-linear-gradient(-135deg, #51D15B, #42A855);
background: -webkit-linear-gradient(-135deg, #51D15B, #42A855);
background: -o-linear-gradient(-135deg, #51D15B, #42A855);
}
.flex-box {
display: flex;
justify-content: center;
align-items: center;
}
.box-width {
width: 80%;
}
/*最外層*/
.login-box {
width: 20%;
min-width: 304px;
max-width: 404px;
height: 50%;
min-height: 368px;
max-height: 468px;
flex-direction: column;
box-shadow: 1px 1px 15px #7B8C99;
background: #fff;
}
/*LOGIN標(biāo)題*/
.sign-title {
color: #42A855;
border: 2px solid #42A855;
border-top: transparent;
border-left: transparent;
border-right: transparent;
}
/*圖片切換*/
.picture-carousel {
position: relative;
display: flex;
margin: 10%;
}
/*圖片切換箭頭*/
.arrow {
z-index: 3;
position: absolute;
font-size: 60px;
height: 100%;
width: 30%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.arrow:hover {
cursor: pointer;
}
.left-arrow {
left: 0;
}
.before-arrow {
width: 0px;
height: 0px;
border-width: 30px;
border-style: solid;
border-color: transparent #51D15B transparent transparent;
}
.right-arrow {
right: 0;
}
.after-arrow{
width: 0px;
height: 0px;
border-width: 30px;
border-style: solid;
border-color: transparent transparent transparent #51D15B;
}
.picture-carousel img {
width: 80px;
height: 80px;
transition: all 0.2s linear;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.img-setting {
margin: 0px -15px;
}
.p1 {
transform: scale(0.6);
z-index: 1;
}
.p1:hover {
transform: scale(0.8);
}
.p2 {
transform: scale(0.8);
z-index: 2;
}
.p2:hover {
transform: scale(1);
}
.p3 {
transform: scale(1);
z-index: 3;
}
.p3:hover {
transform: scale(1.2);
}
/*用戶名*/
.name-box {
display: flex;
justify-content: center;
border: 1px solid #51D15B;
}
.name-box .user-name {
width: 100%;
text-align: center;
padding: 10px;
outline-color: #42A855;
border: none;
font-size: 16px;
}
/* 登錄按鈕 */
.button-box{
display: flex;
justify-content: center;
margin: 10px 0 20px;
}
.button-box .login-button{
width: 100%;
padding: 10px 20px;
outline:none;
border: none;
background: #42A855;
color: white;
font-size: 16px;
}
/* 錯(cuò)誤信息 */
.error-box{
color: #42A855;
border: 2px solid #42A855;
border-top: transparent;
border-left: transparent;
border-right: transparent;
}
.error-box span{
visibility: hidden;
color: #d43f3a;
font-size: 14px;
}login.js
// 用于存儲(chǔ)圖片順序
var imgArray = ["1","2","3","4","5"];
// 獲取箭頭
var leftArrow = document.getElementsByClassName("left-arrow")[0];
var rightArrow = document.getElementsByClassName("right-arrow")[0];
// 獲取用戶名
var userName = document.getElementsByClassName("user-name")[0];
// 獲取登錄按鈕
var loginButton = document.getElementsByClassName("login-button")[0];
// 獲取錯(cuò)誤信息欄
var errorMessage = document.getElementsByClassName("error-message")[0];
// 添加左箭頭監(jiān)聽事件
leftArrow.addEventListener("click",function(){
imgArray.unshift(imgArray[imgArray.length - 1]); // 向數(shù)組的開頭添加一個(gè)元素 //
imgArray.pop(); // 刪除并返回?cái)?shù)組的最后一個(gè)元素
carouselImg(); // 切換圖片
});
// 添加右箭頭監(jiān)聽事件
rightArrow.addEventListener("click",function(){
imgArray.push(imgArray[0]); // 把第一個(gè)元素放在最后
imgArray.shift(); // 刪除并返回?cái)?shù)組的第一個(gè)元素
carouselImg(); // 切換圖片
});
// 切換圖片
function carouselImg(){
for(var count = 0;count < imgArray.length;count++){
document.getElementsByTagName("img")[count].src = "./img/" + imgArray[count] + ".jpg";
document.getElementsByTagName("img")[count].alt=imgArray[count] + ".jpg";
}
}
// 添加登錄按鈕監(jiān)聽事件
loginButton.addEventListener("click",function(){
if(userName.value === ""){
errorMessage.innerHTML = "Please Type You Name";
errorMessage.style.visibility = "visible";
}else if(userName.value.length > 8){
errorMessage.innerHTML = "Your Name Cannot Over 8 Words";
errorMessage.style.visibility = "visible";
}else{
window.location.href=encodeURI("index.html?selectpicture=" + document.getElementsByClassName("p3")[0].alt +
"&username=" + userName.value);
}
});
// Enter按鍵綁定登錄事件
document.onkeydown = function (event) {
var e = event || window.event;
if(e && e.keyCode === 13){
loginButton.click();
}
};index.html
chat-room
index.css
*{
margin: 0;
padding: 0;
font-family: "Microsoft Yahei"
}
html,body{
width: 100%;
height: 100%;
}
/* 背景色 */
body{
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-135deg,#51D15B,#42A855);
background: -moz-linear-gradient(-135deg,#51D15B,#42A855);
background: -webkit-linear-gradient(-135deg,#51D15B,#42A855);
background: -o-linear-gradient(-135deg,#51D15B,#42A855);
}
/* 最外層 */
.chat-box{
width: 50%;
max-width: 720px;
min-width: 400px;
height: 80%;
min-height: 530px;
max-height: 530px;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: 1px 1px 15px #333;
}
/* 頭部 */
.chat-header{
margin: 5px;
box-shadow: 1px 1px 15px #7B8C99;
}
.button-box{
display: flex;
justify-content: flex-end;
}
.log-out{
height: 100%;
font-size: 14px;
font-weight: bold;
padding: 5px 15px;
color: #79C2EA;
background: #fff;
outline: none;
border: none;
border-radius: 15px;
cursor: pointer;
}
/* 主體 */
.chat-body{
height: 90%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 5px;
padding: 5px;
}
/* 主體左側(cè) */
.chat-body-left{
height: 100%;
width: 70%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 5px;
}
/* 左側(cè)內(nèi)容 */
.chat-content{
box-shadow: 1px 1px 15px #7B8C99;
height: 100%;
margin-bottom: 5px;
overflow: scroll;
}
/*聊天氣泡*/
.my-message-box {
display: flex;
justify-content: flex-end;
align-content: center;
margin: 5px;
}
.other-message-box {
display: flex;
justify-content: flex-start;
align-content: center;
margin: 5px;
}
.message-content {
display: flex;
justify-content: center;
align-content: center;
background-color: #51D15B;
padding:5px 10px;
border-radius: 15px;
color: #fff;
}
.other-message-content{
display: flex;
justify-content: center;
align-content: center;
background-color: #79C2EA;
padding: 5px 10px;
border-radius: 15px;
color: #fff;
}
.message-content span{
padding:20px 0px;
}
.user-chat-img {
width: 50px;
height: 50px;
}
.other-message-content span{
padding: 20px 0px;
}
.message-arrow{
width: 0;
height: 0;
border-width:8px;
border-style: solid;
border-color: transparent transparent transparent #51D15B;
align-self: center;
}
.other-message-arrow{
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #79C2EA transparent transparent;
align-self: center;
}
.user-information{
display: flex;
flex-direction: column;
align-content: flex-end;
}
.other-user-information{
display: flex;
flex-direction: column;
align-content: flex-end;
}
.user-chat-name{
color: #333;
font-size: 16px;
text-align: center;
}
/* 聊天輸入框 */
.chat-edit{
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 1px 1px 15px #7B8C99;
overflow: hidden;
}
/* 聊天輸入框輸入?yún)^(qū)域 */
.edit-box{
width: 80%;
height: 100%;
margin: 5px;
border: none;
outline: none;
}
/* 聊天輸入框按鈕 */
.edit-button{
height: 100%;
padding: 5px 15px;
background: #fff;
color: #79C2EA;
outline: none;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
/* 主體右側(cè) */
.chat-body-right{
height: 100%;
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5px;
box-shadow: 1px 1px 15px #7B8C99;
}
.user-name{
margin: 15px;
font-size: 18px;
font-weight: bold;
color: #79C2EA;
}
.user-img{
width: 100px;
height: 100px;
margin: 5px;
}
.online-count{
font-size: 18px;
font-weight: bold;
color: #79C2EA;
}
/* 兼容小屏幕 */
@media screen and (max-width:420px){
.chat-box{
width: 50%;
max-width: 720px;
min-width: 300px;
height: 80%;
min-height: 530px;
max-height: 530px;
}
.chat-body-left{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 5px;
}
.chat-body-right{
display: none;
}
}index.js
// 獲取url里面的內(nèi)容
var url = decodeURI(location.href).split("?")[1].split("&"); //..數(shù)組第一個(gè)元素為圖片路徑，第二個(gè)元素為用戶名
console.log(url);
// 獲取聊天內(nèi)容框
var chatContent = document.getElementsByClassName("chat-content")[0];
// 獲取聊天輸入框
var editBox = document.getElementsByClassName("edit-box")[0];
// 獲取聊天輸入框發(fā)送按鈕
var editButton = document.getElementsByClassName("edit-button")[0];
// 獲取用戶名欄
var userName = document.getElementsByClassName("user-name")[0];
// 獲取在線人數(shù)欄
var onlineCount = document.getElementsByClassName("online-count")[0];
// 登錄頁面的名稱放在右側(cè)
userName.innerHTML = url[1].split("=")[1];
var userImg = document.getElementsByClassName("user-img")[0];
// 把登錄頁面的頭像放在右側(cè)
userImg.src = `./img/${url[0].split("=")[1]}`;
var logOut = document.getElementsByClassName("log-out")[0];
// 發(fā)送按鈕綁定點(diǎn)擊事件
editButton.addEventListener("click",sendMessage);
// 登出按鈕綁定點(diǎn)擊事件
logOut.addEventListener("click",closePage);
// 綁定Enter鍵和發(fā)送事件
document.onkeydown = function(event){
var e = event || window.event;
if(e && e.keyCode === 13){
if(editBox.value !== ""){
editButton.click();
}
}
};
// 關(guān)閉頁面
function closePage(){
var userAgent = navigator.userAgent;
console.log(`userAgent=${userAgent}`);
if(userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1){ //..如果是火狐或者谷歌
window.location.href = "about:blank";
}else{
window.opener = null;
window.open("","_self");
window.close();
}
}
// socket部分
var socket = io();
// 當(dāng)接收到消息并且不是本機(jī)時(shí)生成聊天氣泡
socket.on("message",function(information){
console.log("收到消息",information);
if(information.name !== userName.textContent){ // 不是本機(jī)時(shí)
createOtherMessage(information); // 生成聊天氣泡
}
});
// 當(dāng)接收到有人連接進(jìn)來
socket.on("connected",function(onlinecount){
console.log(`有人登錄，在線人數(shù)為：${onlinecount}`);
onlineCount.innerHTML = "Online:" + onlinecount;
});
// 當(dāng)接收到有人斷開后
socket.on("disconnected",function(onlinecount){
console.log(`有人斷開啦：當(dāng)前人數(shù)為：${onlinecount}`);
onlineCount.innerHTML = "Online:" +onlinecount;
});
// 發(fā)送本機(jī)的消息
function sendMessage(){
if(editBox.value != ""){ //..如果發(fā)送內(nèi)容不為空
var myInformation = {
name :userName.textContent,
chatContent : editBox.value,
img : userImg.src
};
socket.emit("message",myInformation);
createMyMessage(); // 創(chuàng)建本機(jī)聊天氣泡
editBox.value = ""; //..清空文本框
}
}
// 生成本機(jī)的聊天氣泡
function createMyMessage(){
var myMessageBox = document.createElement("div");
myMessageBox.className = "my-message-box";
var messageContent = document.createElement("div");
messageContent.className = "message-content";
var text = document.createElement("span");
text.innerHTML = editBox.value;
messageContent.appendChild(text);
myMessageBox.appendChild(messageContent);
var arrow = document.createElement("div");
arrow.className = "message-arrow";
myMessageBox.appendChild(arrow);
var userInformation = document.createElement("div");
userInformation.className = "user-information";
var userChatImg = document.createElement("img");
userChatImg.className = "user-chat-img";
userChatImg.src = userImg.src;
var userChatName = document.createElement("div");
userChatName.className = "user-chat-name";
userChatName.innerHTML= userName.textContent;
userInformation.appendChild(userChatImg);
userInformation.appendChild(userChatName);
myMessageBox.appendChild(userInformation);
chatContent.appendChild(myMessageBox);
chatContent.scrollTop = chatContent.scrollHeight; // 滾動(dòng)到最新聊天內(nèi)容
}
// 生成其他用戶的聊天氣泡
function createOtherMessage(information) {
var otherMessageBox = document.createElement("div");
otherMessageBox.className = "other-message-box";
var otherUserInformation = document.createElement("div");
otherUserInformation.className = "other-user-information";
var userChatImg = document.createElement("img");
userChatImg.className = "user-chat-img";
userChatImg.src = information.img;
var userChatName = document.createElement("span");
userChatName.className = "user-chat-name";
userChatName.innerHTML = information.name;
otherUserInformation.appendChild(userChatImg);
otherUserInformation.appendChild(userChatName);
otherMessageBox.appendChild(otherUserInformation);
var otherMessageArrow = document.createElement("div");
otherMessageArrow.className = "other-message-arrow";
otherMessageBox.appendChild(otherMessageArrow);
var otherMessageContent = document.createElement("div");
otherMessageContent.className = "other-message-content";
var text = document.createElement("span");
text.innerHTML = information.chatContent;
otherMessageContent.appendChild(text);
otherMessageBox.appendChild(otherMessageContent);
chatContent.appendChild(otherMessageBox);
chatContent.scrollTop = chatContent.scrollHeight;
}server.js
// 引入必須模棱
var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);
var path = require("path");
// 在線人數(shù)統(tǒng)計(jì)
var onlineCount = 0;
app.use(express.static(__dirname));
// 路徑映射
app.get("/login.html",function(request,response){
response.sendFile("login.html");
});
// 當(dāng)有用戶連接進(jìn)來時(shí)
io.on("connection",function(socket){
console.log("a user connected");
// 發(fā)送給客戶端在線人數(shù)
io.emit("connected",++onlineCount);
// 當(dāng)有用戶斷開
socket.on("disconnect",function(){
console.log("user disconnected");
// 發(fā)送給客戶端人數(shù)
io.emit("disconnected",--onlineCount);
console.log(onlineCount);
});
// 收到了客戶端發(fā)來的消息
socket.on("message",function(message){
// 給客戶端發(fā)送消息
console.log("最后
終端輸入
node server.js
瀏覽器地址欄輸入
http://localhost:4000/login.html
讀到這里，這篇“Node.js+express+socket怎么實(shí)現(xiàn)在線實(shí)時(shí)多人聊天室”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱：Node.js+express+socket怎么實(shí)現(xiàn)在線實(shí)時(shí)多人聊天室
分享網(wǎng)址：http://weahome.cn/article/jhcpso.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
