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>`;
})
//将返回的信息渲染到页面上·~嘻嘻,这样就可以进行群组通信了
所有人通信通信的过程和步骤已经可以了,下一篇将会介绍私发信息
nodejs之socket.io 聊天实现的更多相关文章
- Socket.IO聊天室~简单实用
小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~ ...
- nodejs+express+socket.io
其实官网文档清楚了 https://socket.io/get-started/chat/ 但是因为之前写的是nodejs+express, socket.io是后加的, 还是有小坑 服务器端: 官 ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:socket.io&聊天实现
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- 使用nodejs引用socket.io做聊天室
Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...
- 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
- NodeJS+Express+Socket.io的一个简单例子
关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...
- nodejs之socket.io模块——实现了websocket协议
Nodejs实现websocket的4种方式:socket.io.WebSocket-Node.faye-websocket-node.node-websocket-server,主要使用的是sock ...
- nodejs的socket.io学习笔记
socket.io学习笔记 1.服务器信息传输: 2.不分组,数据传输: 3.分组数据传输: 4.Socket.io难点大放送(暂时没有搞定): 服务器信息传输 1. // send to curre ...
- NodeJS + Socket.io聊天服务器连接数达到1024后就连不上了
如果是亚马逊的Engine Yard服务器,解决办法为: 1.查看端口占用情况,找到nodejs进程号,例如我这里是8000端口 lsof -i:8000 找到pid 例如为 8213 2.设置no ...
随机推荐
- [GO]gomaxprocs的使用
package main import ( "runtime" "fmt" ) func main() { n := runtime.GOMAXPROCS()/ ...
- 浅说Java反射机制
工作中遇到,问题解决: JAVA语言中的反射机制: 在Java 运行时 环境中,对于任意一个类,能否知道这个类有哪些属性和方法? 对于任意一个对象,能否调用他的方法?这些答案是肯定的,这种动态获取类的 ...
- 【更新】用word文档来发布到csdn等博客上边免去一张张上传图片的烦恼
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- 用JAVA实现无等待数据库连接池
我们都知道数据库连接是一种有限和非常昂贵的应用资源,怎样对这些资源进行高效的管理,能有效的改善整个系统的性能和健壮性.数据库连接池正是针对这个问题而提出来的. 数据库连接负责分配.释放和管理数据库连接 ...
- JVM 方法调用之解析
方法调用并不等同于方法执行,方法调用阶段唯一的任务就是确定被调用方法的版本(即调用哪一个方法),暂时还没有涉及到方法内部的具体运行过程.在程序运行时,进行方法调用是最普遍最频繁的操作,但Class文件 ...
- linux命令の ./configure --prefix
源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install). Configure是一个可执行脚本,它有很多选项,在待安装的源码路径下使用命令./con ...
- android hook getdeceiveid
很多手机软件使用了手机绑定.QQ,微信等.如果使用了不同的设备,则需要验证码. 要用一台手机来模拟与另一台手机一样环境,估计hook 系统的相关函数可以实现. 想着应该有现成的软件的,例如 smart ...
- C#线程和异步
C#Thread学习 C#ThreadPool学习 C#Task学习 C#backgroundWorker c# 锁的使用 C#前台线程和后台线程区别 C#Async,await异步简单介绍 C#委托 ...
- 【QTP专题】04_对象及操作方法
本节介绍知识点包括 1.QTP自动化的原理 2.两类对象:TO(测试对象).RO(运行对象) 3.操作方法:SetTOProperty,GetROProperty,GetTOProperty 1.QT ...
- Linux 开启路由转发功能
想让一台Red Hat Enterprise Linux 7开通iptables的nat转发功能 A服务器:192.168.30.20/24 B服务器:192.168.30.1/24,eth0; 19 ...