聊天室应用——jquery + node.js + websocket
Posted Vodka~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了聊天室应用——jquery + node.js + websocket相关的知识，希望对你有一定的参考价值。
1.index.js
var app = require('express')();
var express = require('express');
var Server = require('http').createServer(app);
var io = require('socket.io')(Server);
var path = require('path');
var Router = require('./Router');
//配置body-parser
var BodyParser = require('body-parser');
app.use(BodyParser.urlencoded({extend: false}));
app.use(BodyParser.json());
//配置默认可以访问的静态资源目录
app.use('/views/',express.static(path.join(__dirname , './views')));
/*
配置使用 art-template 模板引擎,第一个参数表示，当渲染以 .art 结尾的文件的时候(也可以修改为其他后缀,如： .html )， 使用
art-template 模板引擎， express-art-template 是专门用来在 Express 中把art-template 整合到Express 中，原因在于 express-art-template 依赖了 art-template
*/
app.engine('html',require('express-art-template'));
//服务器监听端口
Server.listen(5000,() => {
console.log('Listening on *:5000');
});
//加载路由
app.use(Router);
//定义获取现在时间的函数
function Time(){
var D = new Date();
var Hours = D.getHours();
var Minutes = D.getMinutes();
var Seconds = D.getSeconds();
if(Minutes <10 && Minutes >=0 && Seconds < 10 && Seconds >= 0) {
return Hours + ':0' + Minutes + ':0'+Seconds ;
}
if(Minutes <10 && Minutes >=0 && Seconds > 10 ){
return Hours + ':0' + Minutes + ':' + Seconds ;
}
if(Minutes > 10 && Seconds < 10 && Seconds >= 0){
return Hours +':' + Minutes + ':0' + Seconds ;
}
return Hours + ':' + Minutes + ':' + Seconds;
}
var User = new Map(); //定义一个数组，登记相应用户的socket.id,便于通信
var count = 0 ; //定义一个变量用来维护当前在线人数
//socket信道内容处理
//处理登录信息
io.on('connection',(socket)=>{
var SaveName = Router.SaveName;
count++;
//上线通知，获取服务的Save数组里的用户数据
console.log(SaveName +' had connected!');
//socket通道连接后，向客户端发送在线用户数量
io.emit('online',{
count: count
})
//接收聊天信息
socket.on('chat',(msg)=>{
console.log( msg.Name + ': ——'+msg.Message);
User.set(socket.id,msg.Name); //存储用户与socket.id的关系
//除了发送者以外，连接到客户端的用户都可以收到这个信息
io.emit('Saying',{
data: msg.Message,
name: msg.Name , //表示当前信息是由哪个用户发出
time: Time(), //信息发送时间
src: msg.Anvarta
});
});
//用于渲染用户列表接收base64格式的图片,再群发给连接当前服务器用户
socket.on('ListAnvarta',(msg)=>{
io.emit('listAnvarta',{
Src: msg.Src,
Name: SaveName
})
})
//监听断开连接
socket.on('disconnect',()=>{
count--;
//发送离线用户数量
io.emit('offline',{
count: count
})
io.emit('offList',{
Name: User.get(socket.id)
})
//离线通知
console.log(User.get(socket.id) + " had off-line! onlines: " + count);
User.delete('socket.id'); //删除下线用户
});
});
2.Router.js
//导包
const { response } = require('express');
var express = require('express');
var Router = express.Router();
//变量,函数区域
Router.SaveName =''; //保存当前登录用户的用户名
//登录页面发送
Router.get('/',(req,res) => {
res.render('D:\\\\web\\\\commute\\\\views\\\\html\\\\login.html');
});
//主页面的发送
Router.post('/index',(req,res) =>{
var body = req.body;
// console.log(body.UserName +','+ body.Account);
Router.SaveName = body.UserName;
//发送渲染页面
res.render('D:\\\\web\\\\commute\\\\views\\\\html\\\\index.html',{
UserName: body.UserName,
Account: body.Account
})
});
//导出包含路由的容器
module.exports = Router;
1.index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO chat</title>
<link rel="stylesheet" href="views/css/index.css">
<head>
<body>
<div id="WeChat">
<div id="Bar">
<div id="Photo">
<div id='Instead'>上传头像</div>
<input type='file' id='File' value='获取图片' />
<img src="" id="Anvarta" >
</div>
<div id=NA>
<div id="Name">{{UserName}}</div>
<div id="Account" >{{Account}}</div>
</div>
<div id="Onlines">
</div>
</div>
<div id="UserList">
</div>
<div id="Right">
<!-- 展示消息面板 -->
<div id="DisplayMessage">
</div>
<!-- 发送消息面板 -->
<div id="SentBoard">
<textarea name="" id="message"></textarea>
<button id="Send">Send</button>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js" rel="external nofollow" ></script>
<script type="text/javascript">
$(function(){
//创建socket通道
var Info = io.connect('127.0.0.1:5000');
//获取添加头像有关的元素
var GetImg = document.getElementById('File');
var Anvarta = document.getElementById('Anvarta');
var Instead = document.getElementById('Instead');
var ChatAnvarta =document.getElementById('ChatAnvarta');
var Onlines = document.getElementById('Onlines');
var SId = ''; //暂存当前socket的专用ID
//获取用户信息
var Name = $('#Name').text();
//用户上线后，接收服务端发来的在线用户数量
Info.on('online',(msg)=>{
$('#Onlines').html('Onlines users : ' + msg.count);
})
//用户离线后，接收服务端发来的在线用户数量
Info.on('offline',(msg)=>{
$('#Onlines').html('Onlines users : ' + msg.count);
})
//发送信息
$('#Send').click(()=>{
//发送聊天信息
Info.emit('chat',{
Message: $('#message').val(),
Name: $('#Name').text(),
Anvarta: $('#Anvarta').attr('src') //发送当前用户的base64编码后的头像信息
});
$('#message').val(''); //消息发送后，清空聊天框
});
//渲染聊天信息到聊天界面
Info.on('Saying',(msg)=>{
console.log( msg.name + ': '+msg.data);
/*
<div id="RContent">
<div class="TimeBar">
<div class="Time">23:05:43</div>
</div>
<img src="" id="RAnvarta">
<div id="Rmessages"></div>
</div>
*/
//如果是本身发送的信息，就渲染在右侧
if(msg.name == Name){
$Time = '<div class="Time">'+ msg.time+'</div>';
$TimeBar = '<div class="TimeBar">'+ $Time +'</div>' ;
$RAnvarta = '<img src= "'+ msg.src +'" id="RAnvarta">';
$Rmessages = '<div id="Rmessages">'+ msg.data +'</div>';
$RContent = '<div id="RContent">'+$TimeBar+$Rmessages+$RAnvarta+'</div>';
$('#DisplayMessage').append($RContent);
}
else{
$Time = '<div class="Time">'+ msg.time+'</div>';
$TimeBar = '<div class="TimeBar">'+ $Time +'</div>' ;
$LAnvarta = '<img src= "'+ msg.src +'" id="LAnvarta">';
$Lmessages = '<div id="Lmessages">'+ msg.data +'</div>';
$LContent = '<div id="LContent">'+$TimeBar+$LAnvarta+$Lmessages+'</div>';
$('#DisplayMessage').append($LContent);
}
});
//添加头像
GetImg.onchange = function(){
var file = this.files[0]; //若选择多张图片时，用第一张
if(window.FileReader){ //如果当前浏览器可以使用FileReader
var fr = new FileReader(); //定义一个读取文件对象
fr.readAsDataURL(file); //输入要读取的文件，定义读取完毕后的文件格式
fr.onloadend = (event)=>{ //读取完毕后
Anvarta.src = event.target.result;
Src = event.target.result;
//将头像图片发送到服务器，再由服务器选择是否发送到其他对象
Info.emit('ListAnvarta',{
//向服务端发送base64编码格式的照片
Src: event.target.result,
});
}
}
//隐形与显形切换
Instead.style.opacity = 0;
Anvarta.style.opacity = 1;
}
//渲染上线用户列表
Info.on('listAnvarta',(msg)=>{
//新增一个用户，jquery的字符串拼接
var $Abord ="<div id='Abord'><img src= ' "+ msg.Src +" ' alt='' class='UserAnvarta'></div>" ;
var $UserName = "<div class='UserName'>" +msg.Name+ "</div>";
var $User = "<div class='User'>"+$Abord+$UserName+ "</div>";
$('#UserList').append($User);
var AnvartaList = document.getElementsByClassName('UserAnvarta');
for ( index = 0 ; index < AnvartaList.length ; ++index){
AnvartaList[index].style.opacity = 1;
}
});
//渲染离线用户列表
Info.on('offList',(msg)=>{
//用jquery的find()方法找到相应的子元素，再对整个元素删除
var index = 0 ;
var UserLists = document.getElementsByClassName('UserName');
//通过名字检测，找到相应元素的序号
for( ; index < UserLists.length; index++){
if(UserLists[index].innerHTML == msg.Name){
聊天应用程序：node.js 还是 APE？
Node.js+websocket+mongodb实现即时聊天室
在IOS中构建一个使用node.js服务器的聊天应用程序[关闭]