<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.user{
color:lightskyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div class="panel panel-default">
<div>
<h4>欢迎来老王聊天室</h4>
</div>
<div>
<ul id="messageul">
</ul>
</div>
<div>
<div>
<div>
<input id="txtmsg" type="text" onkeydown="handlekeydown(event)">
</div>
<div>
<button class="btn btn-default" onclick="send()">发送
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="panel panel-default">
<div>
<h4>在线用户</h4>
</div>
<div>
<ul id="userul"></ul>
</div>
<div>
<h4 id="onlineusers">在线人数 0</h4>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
let txtmsg = document.queryselector('#txtmsg');
let onlineusers = document.queryselector('#onlineusers');
//此脚本会在window上增加一个io的属性
//http://localhost:8080/=/=空
let socket = io();
//当客户端连接服务器成功之后,向后台发送一个消息，问一下现在有哪些在线用户
socket.on('connect',function(){
socket.emit('users');
});
let messageul = document.queryselector('#messageul');
let userul = document.queryselector('#userul');
//监听服务器发过来的消息
socket.on('message',function(msgobj){
let li = document.createelement('li');
li.classname = 'list-group-item';
li.innerhtml = `${msgobj.username}:${msgobj.content} <span>${new date(msgobj.createat).tolocalestring()}</span>`;
messageul.appendchild(li);
});
socket.on('userlist',function(userlist){
userul.innerhtml = userlist.map(item=>(
`<li>${item}</li>`
)).join('');
countuser();
});
socket.on('user-added',function(username){
let li = document.createelement('li');
li.classname = 'list-group-item';
li.innerhtml = `<span>${username}</span>`;
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} `;
}
})
</script>
</body>
</html>
<!--npm i express socket.io -s -->
后台node
let express = require('express');
let path = require('path');
let app = express();
app.get('/',function(req,res){
res.sendfile(path.resolve('index.html'));
});
let server = require('http').createserver(app);
//socket.io是依赖http服务器
let io = require('socket.io')(server);
//声明一个对象，保存所有的客户端用户名和它们的socket对应关系
let clients = {};
//监听客户端的连接，当连接到来的时候执行此回调函数
io.on('connection',function(socket){
//在函数的内部声明一个变量，叫username
let username;
//监听客户端的发过来的消息，当消息发过来的时候执行回调函数
socket.on('message',function(data){
if(username){
//判断是公聊还是私聊
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{//没匹配上
//正常发言，向所有的客户端进行广播
io.emit('message',{
username,content:data,createat:new date()
});
}
}else{
username = data;//把这个消息当成用户名
//关联起来
clients[username]= socket;
//向所有的客户端广播说有新的用户加入聊天室
io.emit('message',{
username:'系统',content:`欢迎 ${username} 加入聊天室`,createat:new date()
});
//事件的名字可以自定义
io.emit('user-added',username);
}
});
//监听客户端发过来的请求，把用户数组返回
socket.on('users',function(){
let userlist = object.keys(clients);
socket.emit('userlist',userlist);
});
});
server.listen(8080);
/**
* 1.实现匿名聊天
* 1. 在客户端里连接上服务器
* 2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取文本框的内容，把文本框的内容发送到后台
* 3. 后台服务器把此消息广播给所有的客户端。
* 4. 所有的客户端收到消息后把此消息在ul列表里显示出来
* 2.实现具名聊天
* 1. 当此用户第一次向服务器发消息的时候
* 2. 服务器会判断此客户端的用户名是否设置过，如果没设置的话就把这个消息当成用户名，以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言
* 3. 私聊
* 1. 点击某个在线用户，点击后会在输入框里出现 @xxx yyy
* 2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息
* 3
*
*/
以上就是html5新技术socket.io实现聊天室的方法的详细内容。