初学SOCKET.IO 2.运用SOCKET.IO实现在线聊天

• 公屏聊天

• html代码

<div id="app" v-cloak>        <input type="text" v-model="nickname" :disabled='isloading'>        <button @click='connect' :disabled='isloading'>连接</button>        <hr>        <textarea v-model="msg" @keydown.enter='send'></textarea>        <input type="text" placeholder="对方昵称" v-model="to">        <button @click="send">发送</button>        <ul>            <li v-for="item in msglist">                {{item.nickname}}：{{item.msg}}            </li>        </ul>    </div>

• JS代码

new Vue({        el: "#app",        data() {            return {                msg: '',                msglist: [],                nickname: '',                socket:null,                isloading:false,            }        },        methods: {            connect() {                this.socket = io('http://127.0.0.1:3000/?nickname='+this.nickname);                this.isloading = !this.isloading;                this.socket.on('chat', data => {                    data = JSON.parse(data);                    this.msglist.push(data);                })            },            send() {                if(!this.socket) return alert('请先连接');//判断用户是否连接                this.msglist.push({nickname:this.nickname,msg:this.msg});                this.msg = '';            }        }    })

• 后台代码

//保存昵称
let clientList= {}
io.om('connection',function(socket){
    let nickname = socket.handshake.query.nickname;
    if(!clientList[nickname]) clientList[nickname] = socket;//判断昵称是否已经存在
    socket.broadcast.emit('chat',JSON.stringify(data));
})

• 私人聊天
• html代码

html添加input元素
<input type="text" placeholder="对方昵称" v-model="to">

• js代码

//在发送消息时输入对方昵称 传递参数到后台
 this.socket.emit('chat', JSON.stringify({                    to:this.to,                    msg:this.msg                }));

//如果用户已下线 
this.socket.on('fail',msg=>{                    this.msglist.push({                        nickname:'系统提示',                        msg                    });

• 后台代码

 socket.on('chat',data=>{接收前端传参        let {to,msg} = JSON.parse(data);// 用户要私聊的用户昵称和内容        let toSocket = clientList[to];        if(toSocket){//如果 昵称存在 则发送            toSocket.emit('chat',JSON.stringify({                nickname,                msg            }))        }else socket.emit('fail','对方已下线')    });

//用户下线后 删除该用户昵称
socket.on('disconnect', function(){        delete clientList[nickname];      });