基于Nodejs利用socket.io实现多人聊天室

socket.io简介

在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket。虽然代码短,但可以很好地体现websocket的原理。

,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道。但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块。在不支持websoket的浏览器中,socket.io可以降级为其他的通信方式,比如有AJAX long polling ,JSONP Polling等。 模块安装

新建一个package.json文件,在文件中写入如下内容:

npm install

执行完这句,node将会从npm处下载socket.io和express模块。

-

服务器端的实现

在文件夹中添加index.js文件,并在文件中写入如下内容:

socket server") }); /*在线人员*/ var onLineUsers = {}; /* 在线人数*/ var onLineCounts = 0; /*io监听到存在链接,此时回调一个socket进行socket监听*/ io.on('connection',function (socket) { console.log('a user connected'); /*监听新用户加入*/ socket.on('login',function (user) { "use strict"; //暂存socket.name 为user.userId;在用户退出时候将会用到 socket.name = user.userId; /*不存在则加入 */ if (!onLineUsers.hasOwnProperty(user.userId)) { //不存在则加入 onLineUsers[user.userId] = user.userName; onLineCounts++; } /*一个用户新加入,向所有客户端监听login的socket的实例发送响应,响应内容为一个对象*/ io.emit('login',{onLineUsers: onLineUsers,onLineCounts: onLineCounts,user: user}); console.log(user.userName,"加入了聊天室");//在服务器控制台中打印么么么用户加入到了聊天室 }); /*监听用户退出聊天室*/ socket.on('disconnect',function () { "use strict"; if (onLineUsers.hasOwnProperty(socket.name)) { var user = {userId: socket.name,userName: onLineUsers[socket.name]}; delete onLineUsers[socket.name]; onLineCounts--; /*向所有客户端广播该用户退出群聊*/ io.emit('logout',user: user}); console.log(user.userName,"退出群聊"); } }) /*监听到用户发送了消息,就使用io广播信息,信息被所有客户端接收并显示。注意,如果客户端自己发送的也会接收到这个消息,故在客户端应当存在这的判断,是否收到的消息是自己发送的,故在emit时,应该将用户的id和信息封装成一个对象进行广播*/ socket.on('message',function (obj) { "use strict"; /*监听到有用户发消息,将该消息广播给所有客户端*/ io.emit('message',obj); console.log(obj.userName,"说了:",obj.content); }); }); /*监听3000*/ http.listen(3000,function () { "use strict"; console.log('listening 3000'); });

运行服务器端程序

输出

此时在浏览器中打开localhost:3000会得到这样的结果:

这里写图片描述

原因是在代码中只对路由进行了如下设置

socket server") });

服务器端主要是提供socketio服务,并没有设置路由。

客户端的实现

在客户端建立如下的目录和文件,其中json3.min.js可以从网上下载到。

client

- - - client.js - - - index.html - - - json3.min.js - - - style.css

在index.html中

1301群聊

在client.js中

'; var userNameDiv = '' + obj.userName + ''; var section = d.createElement('section'); if (isMe) { section.className = 'user'; section.innerHTML = contentDiv + userNameDiv; } else { section.className = 'service'; section.innerHTML = userNameDiv + contentDiv; } CHAT.msgObj.appendChild(section); CHAT.scrollToBottom(); }); } } /*控制键键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 BackSpace 8 Esc 27 Right Arrow 39 -_ 189 Tab 9 Spacebar 32 Dw Arrow 40 .> 190 Clear 12 Page Up 33 Insert 45 /? 191 Enter 13 Page Down 34 Delete 46 `~ 192 Shift 16 End 35 Num Lock 144 [{ 219 Control 17 Home 36 ;: 186 \| 220 Alt 18 Left Arrow 37 =+ 187 ]} 221 Cape Lock 20 Up Arrow 38,< 188 '" 222 * */ //通过“回车键”提交用户名 d.getElementById('userName').onkeydown = function (e) { console.log(e); e = e || event; if (e.keyCode === 13) { CHAT.userNameSubmit(); } }; //通过“回车键”提交聊天内容 d.getElementById('content').onkeydown = function (e) { e = e || event; if (e.keyCode === 13) { CHAT.submit(); } }; })();

style.css

秘密

运行结果

服务器端已经运行,现将客户端也运行起来得到下图:

这里写图片描述

添加了new和pidian两个用户,并发送信息和进行退出,得到下面的结果:

这里写图片描述

以上所述是小编给大家介绍的基于Nodejs利用socket.io实现多人聊天室。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于nodejs...
本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs怎么实现目录不存在自动创建”文章能帮助大...
这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这...
本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs如何实现定时删除文件”文章能帮助大家解决疑惑...
这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来...
今天小编给大家分享一下如何检测nodejs有没有安装成功的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
本篇内容主要讲解“怎么安装Node.js的旧版本”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎...
这篇“node中的Express框架怎么安装使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要介绍“nodejs如何实现搜索引擎”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs如何实现搜索引擎...
这篇文章主要介绍“nodejs中间层如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs中间层如何设置”文...
这篇文章主要介绍“nodejs多线程怎么实现”,在日常操作中,相信很多人在nodejs多线程怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
这篇文章主要讲解了“nodejs怎么分布式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“nodejs怎么分布式”...
本篇内容介绍了“nodejs字符串怎么转换为数组”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情...
这篇文章主要介绍了nodejs如何运行在php服务器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇nodejs如何运行在php服务器文章都...
本篇内容主要讲解“nodejs单线程如何处理事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nodejs单线程如何...
这篇文章主要介绍“nodejs怎么安装ws模块”,在日常操作中,相信很多人在nodejs怎么安装ws模块问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
本篇内容介绍了“怎么打包nodejs代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!
本文小编为大家详细介绍“nodejs接收到的汉字乱码怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs接收到的汉字乱码怎么解决”文章能帮助大家解...
这篇“nodejs怎么同步删除文件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇...
今天小编给大家分享一下nodejs怎么设置淘宝镜像的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希