socket.io聊天室案例
安装socket.io
客户端: socket.io-client
npm i socket.io-client
服务端:koa-socket
npm i koa-socket
//app.js
var Koa = require("koa")
var Router = require("koa-router")
var bodyParser = require('koa-bodyparser')
var session = require('koa-session')
var render = require('koa-art-template')
var path = require('path')
var static = require('koa-static')
var IO = require('koa-socket')
const {
Socket
} = require("socket.io-client")
//通过mySession[时间戳id] 和 用户名匹配
var mySession = {}
// mySession={
// id:{
// username:username 用户名
// socketid:ctx.socket.socket.id //当前用户的id
// }
// }
var io = new IO()
var app = new Koa()
var router = new Router()
io.attach(app) //让socket.io和app实例关联起来
io.on('connection', function (ctx) {
console.log("服务器端socket.io已连接");
// io.broadcast('test',"服务器信息aaa") //可以通过自定义事件将 第二个参数传递给前端页面
})
io.on('sendMsg', function (ctx) {
// console.log(ctx.data.allmsg);
var socketid = ctx.socket.socket.id
var obj = f1(socketid)
io.broadcast('newmsg', obj.username + ':' + ctx.data.allmsg)
})
io.on('login', function (ctx) {
// console.log(ctx);
//获取客户端传递过来的id
var id = ctx.data.id
var socketid = ctx.socket.socket.id
mySession[id].socketid = socketid
//新增用户
// console.log("新增一个用户");
//删除用户
// ctx.socket.on('disconnect',function(ctx){
// console.log(ctx);
// console.log("删除用户");
// })
//线上人数
io.broadcast('online', {
online: mySession
})
//下线后人数
ctx.socket.on('disconnect', function (ctx) {
//获取到当前下线人的id: socket.socket.id
var socketid = ctx.socket.socket.id
var key = f2(socketid)
delete mySession[key]
io.broadcast('online', {
online: mySession
})
})
})
//私聊
io.on('msgLs',function(ctx){
//获取私聊数据
var msg = ctx.data.siliaoMsg
//获取私聊对象的socketid
var toid=ctx.data.tosocketid
//获取登录用户的socketid
var fromsocketid=ctx.socket.socket.id
//根据tosocketid 查找名字
var obj = f1(fromsocketid)
var name = obj.username
//私聊需要
app._io.to(toid).emit('newmsg',`${name}:${msg}`);
})
//群聊
io.on('joinGroup',function(ctx){
var groupId = ctx.data
ctx.socket.socket.join(groupId)
})
io.on('sendGroup',function(ctx){
//获取用户发送的内容
var newmsg=ctx.data.groupMsg
var groupid = ctx.data.groupid
//获取发送人
var fromid = ctx.socket.socket.id
var obj = f1(fromid)
var name = obj.username
app._io.to(groupid).emit('newmsg',`来自${group[groupid]}的${name}:${newmsg}`)
})
var group={
'a_group':'A群',
'b_group':'B群'
}
//根据socketid返回整条数据
function f1(socketid) {
for (const key in mySession) {
var obj = mySession[key]
if (socketid == obj.socketid) {
return obj
}
}
}
//根据socketid返回时间戳id
function f2(socketid) {
for (const key in mySession) {
var obj = mySession[key]
if (socketid == obj.socketid) {
return key
}
}
}
render(app, {
root: path.join(__dirname, 'views'),
extname: '.html',
debug: process.env.NODE_ENV !== 'production'
});
app.keys = ['some secret hurr'];
var store = {
storeage: {},
get(key) {
return this.storeage[key]
},
set(key, session) {
this.storeage[key] = session
},
destroy(key) {
delete this.storeage[key]
}
}
router.get('/', async function (ctx) {
ctx.render('login')
}).post('/dologin', async function (ctx) {
var username = ctx.request.body.username
// var password = ctx.request.body.password
ctx.session.user = {
username: username
}
//将id时间戳保存到session
var id = Date.now()
ctx.session.user.id = id
mySession[id] = {
username: username
}
ctx.redirect('/index')
}).get('/index', function (ctx) {
ctx.render('index', {
username: ctx.session.user.username,
id: ctx.session.user.id
}, true)
})
app.use(static(path.resolve('./public')))
app.use(bodyParser())
app.use(session({
store: store
}, app));
app.use(router.routes())
app.listen(3000, function () {
console.log("请访问 localhost:3000");
})
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="css/qq.css" />
</head>
<body>
<div class="qqBox">
<div class="BoxHead">
<div class="headImg">
<img src="img/6.jpg" style="margin-top:4px;" />
</div>
<div class="internetName">{{username}}<span style="padding-left:30px;">当前在线人数:<em id="usernum">11</em></span></div>
</div>
<div class="context">
<div class="conLeft">
<select id="toname" onchange="siliao = this.value">
</select>
<div class="all">
<input type="text" placeholder="@对所有人" id="all_msg" /><input type="submit" value="@所有人" style="background:#0094ff;color:#fff" id="btn_all" />
</div>
<div>
<button id="a_group">A群</button>
<button id="b_group">B群</button>
</div>
<div class="all">
<input type="text" placeholder="群聊" id="qunliaomsg" /><input type="submit" value="群聊" style="background:#0094ff;color:#fff" id="qun_btn"/>
</div>
</div>
<div class="conRight">
<div class="Righthead">
<div class="headName"><!--向<span style="padding-left:15px;padding-right :15px;">ss</span>发送--> </div>
<div class="headConfig">
<ul>
<li><img src="img/20170926103645_06.jpg" /></li>
<li><img src="img/20170926103645_08.jpg" /></li>
<li><img src="img/20170926103645_10.jpg" /></li>
<li><img src="img/20170926103645_12.jpg" /></li>
</ul>
</div>
</div>
<div class="RightCont">
<ul class="newsList" style="padding-top:20px;" id="ul_list">
</ul>
</div>
<div class="RightFoot">
<div class="footTop">
<ul>
<li><img src="img/20170926103645_31.jpg" /></li>
<li class="ExP"><img src="img/20170926103645_33.jpg" /></li>
<li><img src="img/20170926103645_35.jpg" /></li>
<li><img src="img/20170926103645_37.jpg" /></li>
<li><img src="img/20170926103645_39.jpg" /></li>
<li><img src="img/20170926103645_41.jpg" alt="" /></li>
<li><img src="img/20170926103645_43.jpg" /></li>
<li><img src="img/20170926103645_45.jpg" /></li>
</ul>
</div>
<div class="inputBox">
<textarea style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols="" id="siliaoMsg"></textarea>
<button class="sendBtn" id="btn_siliao">私聊</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost:3000')
socket.on('connect',function(){
console.log("已连接socket.io");
var siliao,group
socket.emit('login',{
id:{{id}} //每次登录都会有个时间戳记录每个用户
})
})
socket.on('test',function(data){
console.log(data);
})
//在线人数
socket.on('online',function(data){
//Object.values 对象转数组
var userNum = Object.values(data.online)
console.log(userNum);
document.getElementById('usernum').innerHTML=userNum.length
var select = document.getElementById('toname')
var html
for (let i = 0; i < userNum.length; i++) {
var user = userNum[i]
html+=`<option value="${user.socketid}">${user.username}</option>`
}
select.innerHTML=html
})
//发送消息
socket.on('newmsg',function(data){
console.log(data);
document.getElementById('ul_list').innerHTML+='<li>'+data+'</li>'
})
socket.on('disconnect',function(data){
console.log("socket.io已断开");
})
document.getElementById('btn_all').onclick=function(){
var allmsg=document.getElementById("all_msg").value
console.log(allmsg);
//将消息发送到服务器端
socket.emit('sendMsg',{
allmsg:allmsg,
})
}
//私聊
document.getElementById('btn_siliao').onclick=function(){
var siliaoMsg = document.getElementById('siliaoMsg').value
// console.log(siliaoMsg);
socket.emit('msgLs',{
siliaoMsg:siliaoMsg,
tosocketid:siliao,
})
}
//群聊
document.getElementById('a_group').onclick=function(){
socket.emit('joinGroup','a_group')
group = "a_group"
}
document.getElementById('b_group').onclick=function(){
socket.emit('joinGroup','b_group')
group = "b_group"
}
document.getElementById('qun_btn').onclick=function(){
var groupMsg = document.getElementById('qunliaomsg').value
socket.emit('sendGroup',{
groupMsg:groupMsg,
groupid:group
})
}
</script>
</html>
//login.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<form action="/dologin" method="POST">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="提交">
</form>
</body>
</html>