利用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构建一个聊天室相关推荐

  1. node+socket.io 实现一个聊天室

    我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架 因此依赖只有两个: 1.socket.io 2.mime(用于获取静态资源时获取文件的mime类型) 安装命令: n ...

  2. Node.js笔记-使用socket.io构建websocket聊天室

    先安装socket.io npm install socket.io 服务端代码: let app = require('http').createServer(); let io = require ...

  3. 基于socket.io的web聊天室

    基于socket.io的web聊天室 一. 项目介绍 该项目使用node.js作为后端服务器框架,并利用socket.io来实现web聊天室功能.socket.io是由 JavaScript 实现的基 ...

  4. Express+Socket.IO 实现简易聊天室

    代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...

  5. node+socket.io+HTTP简易聊天室

    用node+socket.io+HTTP做一个聊天室.聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html). 文件目录如下所示: (node_modules文件夹以及p ...

  6. php做群聊功能,使用socket.io 实现群聊天室

    本篇向大家分享一个socket.io的使用实例,实现群聊天的功能.如果想使用socket.io那么必须借助于nodejs来实现服务端,因此我们需要在nodejs中安装socket.io 安装socke ...

  7. 如何使用Vue,Phaser,Node,Express和Socket.IO构建多人桌面游戏模拟器

    Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor. ...

  8. python聊天室设计_如何使用 Python 开发一个聊天室?

    ​接下来我们就使用 Python 来操作 socket ,实现一个聊天室的一些主要功能.首先我们来回想下,一般的聊天室都是怎样的,有多个用户可以同时在线,他们可以实时获取到消息,实时发送消息. 服务端 ...

  9. 使用python基于socket的tcp服务器聊天室

    # coding=utf-8 import socket,threading,time '''代码说明:1.创建一个字典用于接受客户端的用户名和信息2.创建一个类对象client用于编写客户端套接字对 ...

  10. node php聊天室,利用socket.io实现多人聊天室(基于Nodejs)

    利用socket.io实现多人聊天室(基于Nodejs) socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这 ...

最新文章

  1. SRIO学习(五)——SerDes Macro(串行解串宏)
  2. cube sdio fatfs 初始化sd卡_SD卡读卡器检测——硬盘检测软件Hard Disk Sentinel Pro介绍
  3. 大一计算机课程ppt作业,大学生计算机基础作业PPT.ppt
  4. 易语言反截图_【易语言】模仿QQ截图
  5. JVM类加载理解(线程上下文类加载器、Tomcat类加载器)
  6. java css路径_java web开发中CSS路径有问题吗,运行jsp文件为什么找不到css文件?...
  7. Netflix:如何打造开放协作的实时 ETL 平台?
  8. Tomcat底层原理
  9. c++实现简单的qq连连看秒杀挂
  10. [译] 超快速的分析器(一):优化扫描器
  11. Dest0g3 520迎新赛WP
  12. jdbc笔记(完整)
  13. 别再恐惧 IP 协议(万字长文 | 多图预警)
  14. js中判断字符串是否相等,使用 == 或===
  15. AWS-IAM学习笔记
  16. Vue中使用把汉字转化为拼音字母
  17. 全数字实时仿真软件SkyEye与可信编译器L2C的核心翻译步骤的设计与实现
  18. 看Lucene源码必须知道的基本概念
  19. 遥感影像常用合成波段
  20. 系统提示服务器错误 请联系管理员,金蝶软件K3 主控台登录提示:应用服务器连接到一个错误的数据库,请与系统管理员联系...

热门文章

  1. javscript 简单拖拽(drag)拖放事件、dataTransfer详解,垃圾桶效果
  2. Java 集合系列18之 Iterator和Enumeration比较
  3. STL vector的迭代器的熟练运用及lower_bound和upper_bound的使用
  4. Java 又双叒叕发布新版本,这么多版本如何灵活管理?
  5. 正则匹配新闻内容案例,JS和PHP
  6. node.js使用cluster实现多进程
  7. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第4节 等待唤醒机制_9_等待唤醒机制代码实现_吃货类测试类...
  8. Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序(一)
  9. asp.net MVC中form提交和控制器接受form提交过来的数据(转)
  10. 2016 - 1 -17 GCD学习总结