nodejs之socket.io 聊天实现

写在前面：最近很火的“996”话题，可谓是引起一片热议，马老师说：能够996应该是幸运的，996是对奋斗者的一种机遇（记得不是很清楚）。996缺少的是自己的空闲时间了，当我是空闲的时候偶尔996挺好的，但是一旦当我有了自己的爱好和想要做的事情，我肯定会觉得996真的是需要平衡的，会觉得没有时间去做自己喜欢的事情了，鱼与熊掌不可兼得，不论怎样，健康才是身体996的本钱~~

进入正题：本周的自己学习了nodejs的socket.io部分，嘻嘻，就是可以进行聊天的那种功能，

学知识三重问：是什么？可以做什么？怎样用？这里就直接说怎么用了，

实现聊天的两种方式：

1.用ajax异步获取信息

    //这种方法不能实时的聊天
document.getElementById('btn').onclick=function(){
//咦自己直接写了一个原生的ajax，可以使用jquery的方式来进行ajax
  var newcontent=document.getElementById('newinput').value;
    var xhr =new XMLHttpRequest();
    xhr.open('post','./add');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send('msg='+ newcontent);
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
           var arr= JSON.parse(xhr.responseText);
           var html='<ul>';
            for(var i=0;i<arr.length;i++){
                html+='<li>'+arr[i].username+":"+arr[i].content+" </li>";
            }
            html+='</ul>';
            document.getElementById('box').innerHTML=html;
            document.getElementById('newinput').value='';
        }
    }
}

　　缺点：利用ajax的缺点在于：不能实时的获取聊天信息，如果想实时获取，可以在客户端进行一个定时查询，就是设置一个setInterval，每一秒钟都去取一个数据，~

2：利用socket.io来实现实时的查询功能

 （1）先安装插件

- 客户端：socket.io-client
- 服务器：koa-socket

　（2）nodejs端语言

    本次我们使用页面渲染的方式，将会用到koa-router、fs模块，因此需要提前拿安装

   

const koa =require('koa');
//引入
const Router = require('koa-router');//使用koa路由
const static =require('koa-static');//加载一些静态的文件
const render =require('koa-art-template');//加载koa模板文件
const path =require('path');//渲染一些页面，来取一些数据
const session = require('koa-session');
const IO = require( 'koa-socket' )//非常实用本篇核心插件
const bodyParser = require('koa-bodyparser');//用来给页面传递数据解析的post的方法的插件

　　

　　进行连接

let app =new koa();
//加入socket-io
const io = new IO()
 io.attach( app )//附加到app上关联
io.on( 'connection', ( content ) => {
  console.log( '连接上了');
  io.broadcast('msgl','我是服务器');
})

//前面引入了许多的插件，需要把插件用上

//引入静态资源
app.use(static(path.resolve('./public')));
//处理session
app.use(session({store},app))

app.use(router.routes());

//处理响应
app.use(router.allowedMethods());
app.listen(8888);

　　

客户端连接

    <script src="/socket.io/socket.io.js"></script> //需要导入io
  
 <script>
  var socket = io('http://127.0.0.1:8888');//去监听这个地址
 
//先让客户端登录下，让服务端保存相关的信息，并登录
socket.on('connect', function(){
    console.log('连接连接上了');
    
});

　

3.连接完成后如何进行事件的交互呢

 客户端：

//因为涉及到客户进行聊天，需要记录下每个用户登录成功后的id

socket.emit('login',{
id:{{id}},
});

　　

　服务端记录用户上线信息：

io.on('login',context => {
    let id = context.data.id; 
    //存储现有的用户消息，存储socketid，在list页面加载知乎才存储到的
    global.mySessionStore[id].socketid = context.socket.socket.id;//全局定义的存储所有上线用户的socketid
  //测试广播在线上线用户上线
  io.broadcast('online',{
      online:global.mySessionStore,
  }) 
//用户下线的时候进行的操作，删除这个用户的信息
  context.socket.on('disconnect',(context)=>{
     //删除掉原本存在的id的用户，然后进行存储
     let socketid = context.socket.socket.id;
     let key= findKeyBySocketID(socketid);//删除这个key
     delete global.mySessionStore[key];
      io.broadcast('online',{
        online:global.mySessionStore,
    })
  })  
});　　

 群发送消息：

客户端：发送输入的内容给服务端

//群聊内容
document.getElementById('btn').onclick=function(){
    var newcontent=document.getElementById('newinput').value;
    //将内容发送给服务端，
     socket.emit('sendmsg',{//向服务端传递一个sendmsg事件，
         newcontent:newcontent,
     });
}

　　服务端：接收客户端发来的数据，并识别用户（每个用户都会有一个socketid作为一个可识别的关键点）

//结束用户的消息
io.on('sendmsg',(context,data)=>{
    // context.soclet(客户端那个连接) context.socket.socketie私聊也能够
   //如何拿到当前sessionid来识别是哪个用户访问的。接受用户的消息，在这里拿到当前用户的消息
   //找到当前是的用户名字
   let obj =findBySocketID(context.socket.socket.id);
   msgs.push({username:obj.username,content:data.newcontent});
   //广播到每个的用户那里
    io.broadcast('allmsg',{username:obj.username,content:data.newcontent,type:'all'});
   //allmsg是对客户端一个消息返回事件，此时由客户端进行监控和返回

});

　　客户端接收服务端发来的数据：

socket.on('allmsg',function(data){
    console.log(data);
 
//服务端数据同步过来了，及时更新信息
   var ul =   document.getElementById('msg');
    ul.innerHTML+=`<li><span class="img"></span> 
    <span class="name">${data.username}</span>
    <span class="content">${data.content}</span></li>`;
 })
//将返回的信息渲染到页面上·~嘻嘻，这样就可以进行群组通信了

　　所有人通信通信的过程和步骤已经可以了，下一篇将会介绍私发信息