寫在前面：最近很火的“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>`;
})
//將返回的信息渲染到頁面上·~嘻嘻，這樣就可以進行群組通信了
所有人通信通信的過程和步驟已經可以了，下一篇將會介紹私發信息