html实现聊天功能实现原理,html5新技术socket.io实现聊天室
的⽅法
1
.user{
color:lightskyblue;
cursor: pointer;
}
欢迎来⽼王聊天室
发送
在线⽤户
在线⼈数 0
let txtMsg = document.querySelector('#txtMsg');
let onlineUsers = document.querySelector('#onlineUsers');
//此脚本会在window上增加⼀个io的属性
let socket = io();
//当客户端连接服务器成功之后，向后台发送⼀个消息，问⼀下现在有哪些在线⽤户
<('connect',function(){
});
let messageUl = document.querySelector('#messageUl');
let userUl = document.querySelector('#userUl');
//监听服务器发过来的消息
<('message',function(msgObj){
let li = ateElement('li');
li.className = 'list-group-item';
li.innerHTML = `${msgObj.username}:${t} ${new ateAt).toLocaleString()}`;
messageUl.appendChild(li);
});
<('userList',function(userList){
userUl.innerHTML = userList.map(item=>(
`
${item}`
)).join('');
countUser();
});
<('user-added',function(username){
let li = ateElement('li');
li.className = 'list-group-item';
li.innerHTML = `${username}`;
userUl.appendChild(li);
countUser();
});
function countUser(){
onlineUsers.innerHTML = `在线⼈数 ${userUl.children.length}`; }
/
/发送事件
function send(){
let content = txtMsg.value;//先拿到聊天的内容
socket.send(content);
txtMsg.value = '';
}
function handleKeyDown(event){
if(event.keyCode == 13)
send();
}
//给⽗级绑定点击事件 事件委托
/
/要判断点的是span⽽⾮别的元素
userUl.addEventListener('click',function(event){
//如果事件源的类名是user的话
if(event.target.className == 'user'){
let username = event.target.innerHTML;
txtMsg.value = `@${username} `;
}
})
后台nodelet express = require('express');
let path = require('path');
let app = express();
<('/',function(req,res){
res.solve('index.html'));
});
let server = require('http').createServer(app);
//socket.io是依赖http服务器
let io = require('socket.io')(server);
//声明⼀个对象，保存所有的客户端⽤户名和它们的socket对应关系let clients = {};
//监听客户端的连接，当连接到来的时候执⾏此回调函数
<('connection',function(socket){
//在函数的内部声明⼀个变量，叫username
let username;
/
/监听客户端的发过来的消息，当消息发过来的时候执⾏回调函数('message',function(data){
if(username){
//判断是公聊还是私聊
socket编程聊天室基本流程let reg = /@([^ ] ) (. )/;
let result = data.match(reg);
if(result){//如果result有值则匹配上了
//此处是私聊
let toUser = result[1];
let content = result[2];
clients[toUser] && clients[toUser].send({
username,
content,
createAt:new Date()
});
}else{//没匹配上
//正常发⾔，向所有的客户端进⾏⼴播
username,content:data,createAt:new Date()
});
}
}else{
username = data;//把这个消息当成⽤户名
/
/关联起来
clients[username]= socket;
//向所有的客户端⼴播说有新的⽤户加⼊聊天室
username:'系统',content:`欢迎 ${username} 加⼊聊天室`,createAt:new Date()
});
//事件的名字可以⾃定义
}
});
//监听客户端发过来的请求，把⽤户数组返回
<('users',function(){
let userList = Object.keys(clients);
});
});
server.listen(8080);
/**
* 1.实现匿名聊天
* 1. 在客户端⾥连接上服务器
* 2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取⽂本框的内容，把⽂本框的内容发送到后台
* 3. 后台服务器把此消息⼴播给所有的客户端。
* 4. 所有的客户端收到消息后把此消息在ul列表⾥显⽰出来
* 2.实现具名聊天
* 1. 当此⽤户第⼀次向服务器发消息的时候
* 2. 服务器会判断此客户端的⽤户名是否设置过，如果没设置的话就把这个消息当成⽤户名，以后再发消息的话都会以这个作为⽤户名，如果设置过了就是正常发⾔
* 3. 私聊
* 1. 点击某个在线⽤户，点击后会在输⼊框⾥出现 @xxx yyy
* 2. 服务收到私聊的请求后会到xxx对应的客户端向他单个发消息
* 3
*
*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。