利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊。
socket.io
这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了。其实主要用的东西就是事件监听和触发,on和emit。当socket.io连接成功之后,后台就可以跟浏览器互相通信了。
let io = socket(app);
io.on('connection', socket => {socket.on('reseive', data => {io.emit('news', data)})});
关于后端
首先构建一个服务器,然后请求时将聊天页面文件返回
const app = http.createServer((req, res) => {fs.readFile(__dirname+'/index.html', (err, data) => {if(err){res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200);res.end(data);});
}).listen(3003);
这里没什么可说的,别写错路径就行。
index.html
聊天界面只需要将socket.io引入即可
<script src="/socket.io/socket.io.js"></script>
切记,这里不是说在index.html目录下建立这个文件,因为你的聊天页面是通过后端返回的,说以这个路径是在后端的路径,换句话说,你只需要这么写就行了。
然后就是聊天页面中监听来自服务端的消息并显示到页面
socket.on('news', data => {oDiv.insertAdjacentHTML('beforeend', `<p><span class="title">${data.id}</span><span class="content">${data.msg}</span></p>`);
});
这里我使用了insertAdjacentHTML,这个可能大家没怎么见过,但是很好用,它可以帮你把内容插入到指定位置,当然不是任意位置,有四个位置
//beforebegin
<div>//afterbegincontent//beforeend
</div>
//afterend
每次发送到页面消息总是添加到聊天界面的最后。
其他
我们启动服务器之后,都知道退出直接按ctrl+c,但是总会有不小心嘛。我们肯定遇到过有按两次ctrl+c退出和按一次控制台问你是否退出,按y/n。这里也做一个简单的实现(前提:在node中使用process.exit()来退出)。
按两次ctrl+c退出
首先是监听ctrl+c事件
process.on('SIGINT',callback);
在回调函数中我们可以做一些控制,使得用户两次ctrl+c之后再退出
let isExit = false;
process.on('SIGINT', () => {if(isExit){isExit = false;process.exit();}else{isExit = true;process.stdout.write('Please ^C again to exit this process\n');let timer = setTimeout(function(){clearTimeout(timer);isExit = false;},3000);}})
当然我们为了防止用户按了一次之后很久没按,再次按的时候会退出,三秒之后会重置。
按一次退出并询问
这个跟上面相似,只不过,在按了一次之后提示用户要输入y/n,这里监控用户输入即可。
let isExit = false;
let reset = () => {let timer = setTimeout(() => {clearTimeout(timer);isExit = false;}, 5000)
}
process.on('SIGINT', () => {isExit = true;reset();process.stdout.write('Are you sure exit this process? Y/N\n');})process.stdin.on('data', (data) => {if(!data){}else if(data.toString().trim().toLowerCase() === 'y' && isExit){process.exit();}else{process.stdout.write('\n');}
})
注意点就是监控输入的时候,回调函数中的data不是string,要转一下,data.toString().trim()。
详细代码地址https://github.com/Stevenzwzhai/socket.io_chatRoom
转载于:https://www.cnblogs.com/Upton/p/6734027.html
利用socket.io构建一个聊天室相关推荐
- node+socket.io 实现一个聊天室
我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架 因此依赖只有两个: 1.socket.io 2.mime(用于获取静态资源时获取文件的mime类型) 安装命令: n ...
- Node.js笔记-使用socket.io构建websocket聊天室
先安装socket.io npm install socket.io 服务端代码: let app = require('http').createServer(); let io = require ...
- 基于socket.io的web聊天室
基于socket.io的web聊天室 一. 项目介绍 该项目使用node.js作为后端服务器框架,并利用socket.io来实现web聊天室功能.socket.io是由 JavaScript 实现的基 ...
- Express+Socket.IO 实现简易聊天室
代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...
- node+socket.io+HTTP简易聊天室
用node+socket.io+HTTP做一个聊天室.聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html). 文件目录如下所示: (node_modules文件夹以及p ...
- php做群聊功能,使用socket.io 实现群聊天室
本篇向大家分享一个socket.io的使用实例,实现群聊天的功能.如果想使用socket.io那么必须借助于nodejs来实现服务端,因此我们需要在nodejs中安装socket.io 安装socke ...
- 如何使用Vue,Phaser,Node,Express和Socket.IO构建多人桌面游戏模拟器
Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor. ...
- python聊天室设计_如何使用 Python 开发一个聊天室?
接下来我们就使用 Python 来操作 socket ,实现一个聊天室的一些主要功能.首先我们来回想下,一般的聊天室都是怎样的,有多个用户可以同时在线,他们可以实时获取到消息,实时发送消息. 服务端 ...
- 使用python基于socket的tcp服务器聊天室
# coding=utf-8 import socket,threading,time '''代码说明:1.创建一个字典用于接受客户端的用户名和信息2.创建一个类对象client用于编写客户端套接字对 ...
- node php聊天室,利用socket.io实现多人聊天室(基于Nodejs)
利用socket.io实现多人聊天室(基于Nodejs) socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这 ...
最新文章
- SRIO学习(五)——SerDes Macro(串行解串宏)
- cube sdio fatfs 初始化sd卡_SD卡读卡器检测——硬盘检测软件Hard Disk Sentinel Pro介绍
- 大一计算机课程ppt作业,大学生计算机基础作业PPT.ppt
- 易语言反截图_【易语言】模仿QQ截图
- JVM类加载理解(线程上下文类加载器、Tomcat类加载器)
- java css路径_java web开发中CSS路径有问题吗,运行jsp文件为什么找不到css文件?...
- Netflix:如何打造开放协作的实时 ETL 平台?
- Tomcat底层原理
- c++实现简单的qq连连看秒杀挂
- [译] 超快速的分析器(一):优化扫描器
- Dest0g3 520迎新赛WP
- jdbc笔记(完整)
- 别再恐惧 IP 协议(万字长文 | 多图预警)
- js中判断字符串是否相等,使用 == 或===
- AWS-IAM学习笔记
- Vue中使用把汉字转化为拼音字母
- 全数字实时仿真软件SkyEye与可信编译器L2C的核心翻译步骤的设计与实现
- 看Lucene源码必须知道的基本概念
- 遥感影像常用合成波段
- 系统提示服务器错误 请联系管理员,金蝶软件K3 主控台登录提示:应用服务器连接到一个错误的数据库,请与系统管理员联系...
热门文章
- javscript 简单拖拽(drag)拖放事件、dataTransfer详解,垃圾桶效果
- Java 集合系列18之 Iterator和Enumeration比较
- STL vector的迭代器的熟练运用及lower_bound和upper_bound的使用
- Java 又双叒叕发布新版本,这么多版本如何灵活管理?
- 正则匹配新闻内容案例,JS和PHP
- node.js使用cluster实现多进程
- 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第4节 等待唤醒机制_9_等待唤醒机制代码实现_吃货类测试类...
- Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序(一)
- asp.net MVC中form提交和控制器接受form提交过来的数据(转)
- 2016 - 1 -17 GCD学习总结