寫在前面：最近很火的“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>`;
 })
//將返回的信息渲染到頁面上·~嘻嘻，這樣就可以進行群組通信了

　　群組通信的過程和步驟已經可以了，下一篇將會介紹私發信息

nodejs之socket.io