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

我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架  

因此依赖只有两个: 1、socket.io 2、mime(用于获取静态资源时获取文件的mime类型) 

 安装命令: npm install socket.io mime --save 

 其他的就不赘述了 先描述一下文件目录结构


静态 js 和 css 文件放在 public 下面的相应目录下

socket连接是基于tcp的因此需要给socket传入一个http服务的实例,这样就能启动socket服务

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer();
io = socketio(server);server.listen(3001);
复制代码

当然,socket.io不止提供了一种启动方式,这里就不一一列举了 

 socketio(server) 返回的是一个 socket 实例,通过这个实例可以监听客户端的 connection事件,事件监听的第二个参数是一个回调函数,会掉函数也会返回一个socket对象,这个 socket 对象可以监听这个链接的另一端触发的事件(这里就是客户端)  

这里需要搞清楚的一点是,每个socket连接都会在 connection 事件的回调中返回一个socket 对象,这个对象可监听对应客户端触发的事件,也可以向其他的socket对象广播消息 

 通过connection 事件返回的 socket 对象触发和监听事件: 

io.on('connection', function(socket) {// 监听客户端发送的message事件socket.on('message', function() {// 向同一个房间中的其他用户广播消息socket.broadcast.to(message.room).emit('message', {text: nickNames[socket.id] + ': ' + message.text});});// 触发事件socket.emit('message', {nick: 'Lily',content: 'hello world!'});
});
复制代码

现在我们知道了如何在服务端创建socket 服务,那么客户端应该应该怎么和服务端的socket服务创建连接呢?

html页面引入的其他 js 文件这里就不说了,这里需要说明的是socket.io.js:

<script src="/socket.io/socket.io.js"></script>
复制代码

我刚开始的时候也是很疑惑,因为这个文件在我的服务其中根本不存在。事实是,这个文件是socket 服务器启动后自动生成的。因此我们只需要在html文件中按照这个路径引入就行了。 

引入socket.io.js 后就会有一个全局的 io 对象,用于触发事件和监听服务器 socket 服务器触发的事件 客户端事件监听:

var socket = io.connect();$(document).ready(function() {// 监听服务器发送的事件socket.on('message', function(message) {var newElement = $('<div class="msg-box"></div>').append($('<span></span>').text(message.text));$('#messages').append(newElement);});});
复制代码

客户端触发事件:

socket.emit('message', {nick: 'Lily',content: 'yes! I hear you now'
});
复制代码

message可以是对象也可以是字符串

这样建立连接设置监听后就可以和服务端通过事件进行通信了

服务端监听到客户端发来的消息后向该房间所有用户广播消息:

socket.broadcast.to(currentRoom[socket.id]).emit('message', {text: previousName + ' 现在已更名为 ' + name + '.'
});
复制代码

结合以上描述的这些方法,就能完整搭建一个聊天室了,关于前端页面的结构和页面事件的逻辑我这里就不详细说了

我把我的demo放到了github上,有兴趣的同学可以看看:github.com/SailorCai/n…






本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/537216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓应用用户数据_用户指标数据应用

一、如何理解数据用户数据&#xff1a;gender:性别、 birthday:出生日期行为数据&#xff1a;user_id:用户id、auction_id:购买行为编号、buy_mount:购买数量、day:购买时间商品数据&#xff1a;cat_id:商品种类ID、cat1:商品类别、property:商品属性二、用户数据指标1.用户数据…

三大数据库数据库端口号及连接jdbc驱动下载

Jdbc连接三大数据库&#xff08;mysql sqlserver oracle&#xff09; Mysql:端口号为&#xff1a;3306&#xff08;默认&#xff09; 用java连接mysql数据库 Try{Class.forName(“com.mysql.jdbc.Driver”); //DatabaseName:需要连接的数据库名称 String url”jdbc:mysql://12…

webgis从基础到开发实践_开源WebGIS教程系列——11.1 GISLite 的开发背景与设计

地理信息门户可以帮助人们更容易地发现、访问和使用地理空间信息&#xff0c; 是地理信息发布、服务和共享的重要环节。许多国家都很重视地理信息门户的 建设&#xff0c;把它作为国家空间数据基础设施(spatial data infrastructure&#xff0c;SDI)的重要组成部分。GISLite 是…

Oracle数据库及在DOS命令下面的简单操作

在Oracle数据库注释用--表明为注释&#xff0c;但以下用//或--代表解释;数据库不怎么区分大小写&#xff1b; 先说说一些简单Oracle数据库操作的语句&#xff1a; 使用语句创建普通用户&#xff1a; Create user username identified by password; //创建普通用户 Grant reso…

CSS属性(display)

1.display属性 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>08display属性</title><style>.c1 {background-color: red;/*display: none; !* 让其在页面上不显示 *!*//*display: i…

产品发布系统_【产品发布】第3期|阀门遥控系统

更多精彩&#xff0c;请点击上方蓝字关注我们&#xff01;常熟瑞特电气股份有限公司的阀门遥控系统是一款经典的产品线&#xff0c;包括了全系列的液压执行器&#xff0c;电液执行器&#xff0c;微型动力单元&#xff0c;液压动力泵站&#xff0c;液压电磁阀箱等产品。阀门遥控…

大数据就业前景,分析的太到位了

大数据广泛应用于电网运行、经营管理及优质服务等各大领域&#xff0c;并正在改变着各行各业&#xff0c;也引领了大数据人才的变革。大数据就业前景怎么样&#xff1f;这对于在就业迷途中的我们是一个很重要的信息。 随着大数据时代的到来【这次国家教育部也改革动真格了】&am…

常用集合(List,Set,Map)的基本定义和操作

集合类存放于java.util包中。 集合类存放的都是对象的引用&#xff0c;而非对象本身&#xff0c;出于表达上的便利&#xff0c;我们称集合中的对象就是指集合中对象的引用&#xff08;reference)。 常用的集合类型主要有3种&#xff1a;set(集&#xff09;、list(列表&#x…

多麦克风做拾音的波束_麦克风丨人声应该用动圈话筒还是电容话筒?

无论是在您最喜欢的乐队的纪录片中&#xff0c;还是在电影中那些有关录音棚里的场景中&#xff0c;似乎都存在着一个共同的主题&#xff0c;那就是&#xff1a;歌手们都在使用大振膜的电容麦克风进行录音。我知道人们应该从别人的经验中汲取精华&#xff0c;事半功倍。但是我并…

MYSQL安装与库的基本操作

mysql数据库 什么是数据库 # 用来存储数据的仓库 # 数据库可以在硬盘及内存中存储数据 数据库与文件存储数据区别 数据库本质也是通过文件来存储数据, 数据库的概念就是系统的管理存储数据的文件 数据库介绍 数据库服务器端: 存放数据的主机集群数据库端: 可以连接数据库的任意…

java框架mybatis配置文件总结一

先新建个java EE的项目 该配置文件必须在src的目录下面&#xff0c; 新建一个xml 文件&#xff1a; 建完后发现它会自动建在web目录下面&#xff0c;我们把这个文件移到src目录下面&#xff1a; &#xff08;注&#xff1a;对了&#xff0c;该文件的编码最好用utf-8的no bom,…

python第六周实验_第六周实验四

二.实验的内容(1)根据下面的要求实现圆类Circle。1.圆类Circle的成员变量&#xff1a;radius表示圆的半径。2.圆类Circle的方法成员&#xff1a;Circle():构造方法&#xff0c;将半径置0Circle(double r)&#xff1a;构造方法&#xff0c;创建Circle对象时将半径初始化为rdoubl…

测试:脱离VS2010使用自动化测试时出现 6DA215C2-D80D-42F2-A514-B44A16DCBAAA 错误

在前一系列IronRuby中一直是围绕这UI自动化测试来写的&#xff0c;今天基本测试框架完成了&#xff0c;测试人员没有安装VS2010&#xff0c;不知道能否跑&#xff0c;所以就在测试人员机器上跑跑看&#xff0c;但是问题就出现了 现象 运行run.bat跑单元测试时&#xff0c;出现以…

Linux的远程连接及Linux系统下Tomcat部署

Linux的远程需要用的软件有Xshell&#xff0c;Xftp 本人使用VMware12Pro虚拟机&#xff0c;Linux系统为CentOS7&#xff0c;使用局域网进行远程连接 Xshell和Xftp没有安装的话可以取官网下载&#xff0c;但Xshell需要验证信息&#xff0c;所以也可以去360电脑软件下载 在VMw…

uniapp图标_uniapp扩展自定义uniIcon组件图标

1、访问Iconfont-阿里巴巴矢量图标库&#xff0c;下载自己想要的图片&#xff0c;下载svg格式备用2、通过百度字体编辑器打开本地最新的uni.ttf文件(http://fontstore.baidu.com/static/editor/index.html#)&#xff0c;打开之后可以看到所有的uni所有图标都在里面3、导入第一步…

asp.net面试集合

1 &#xff1a;维护数据库的完整性、一致性、你喜欢用触发器还是自写业务逻辑&#xff1f;为什么 答&#xff1a;尽可能用约束&#xff08;包括CHECK、主键、唯一键、外键、非空字段&#xff09;实现&#xff0c;这种方式的效率最好&#xff1b;其次用触发器&#xff0c;这种方…

Spring Boot 日志的使用及logback.xml的使用

当前是市场上使用的日志框架有很多&#xff0c;比如&#xff1a;JUL、JCL、Jboss-logging、logback、log4j、slf4j....等等&#xff1b; 但是日志主要分为两类&#xff0c;日志门面和日志实现两类&#xff1b;日志门面可以说是日志框架的抽象层&#xff0c;主要实现是的日志实…

基4fft算法的蝶形图_原地且自动整序的FFT算法

传统的计算快速傅里叶变换的Cooley-Tukey算法效率极高&#xff0c;因其主要由蝶形运算构成&#xff0c;所以代码形式也非常简单&#xff0c;只是需要将输入或者输出按照位反转的方式重新排序。这个重新排序的步骤并不是必须的。Clive Temperton于1991年在Self-Sorting In-Place…

嵌入式BootLoader技术内幕(二)

三、Boot Loader 的主要任务与典型结构框架 在继续本节的讨论之前&#xff0c;首先我们做一个假定&#xff0c;那就是&#xff1a;假定内核映像与根文件系统映像都被加载到 RAM 中运行。之所以提出这样一个假设前提是因为&#xff0c;在嵌入式系统中内核映像与根文件系统映像也…

MongoDB数据库的迁移

最近公司开始要换服务器啦&#xff0c;MongoDB上面的数据又得迁移&#xff0c;还是记录一下比较好。 1&#xff09;、将MongoDB的压缩包解压至相对应的路径(压缩文件在本地服务器的地址192.168.0.22的/opt/zip文件下面) 2&#xff09;、配置好mongodb.conf文件&#xff0c;配…