node.js学习（四）

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>