写在前面：最近很火的“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>`;
})
//将返回的信息渲染到页面上·~嘻嘻，这样就可以进行群组通信了
所有人通信通信的过程和步骤已经可以了，下一篇将会介绍私发信息