ajax 多人聊天吧,基于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群聊
ajax 多人聊天吧,基于Nodejs利用socket.io实现多人聊天室相关推荐
- node php聊天室,利用socket.io实现多人聊天室(基于Nodejs)
利用socket.io实现多人聊天室(基于Nodejs) socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这 ...
- 利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
- 在线白板,基于socket.io的多人在线协作工具
为什么80%的码农都做不了架构师?>>> 首发:个人博客,更新&纠错&回复 是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上 ...
- 老雷PHP教程,老雷socket編程之PHP利用socket擴展實現聊天服務
老雷socket編程之PHP利用socket擴展實現聊天服務 socket聊天服務原理 PHP有兩個socket的擴展 sockets和streams sockets socket_create(AF ...
- 如何使用Vue,Phaser,Node,Express和Socket.IO构建多人桌面游戏模拟器
Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor. ...
- phaser.min.js_如何使用Phaser 3,Express和Socket.IO构建多人纸牌游戏
phaser.min.js I'm a tabletop game developer, and am continually looking for ways to digitize game ex ...
- php socket多人聊天,socket.io实现多人聊天
1. 后端环境搭建 # npm init # npm install -s express # npm install -s socket.io npm init 会生成json文件作为依赖包,exp ...
- vue和socket.io开发简单web聊天室
2019独角兽企业重金招聘Python工程师标准>>> 效果预览 https://www.wangchunjian.top/chat.html 需要用到的库 https://sock ...
- 使用nodejs和socket io构建货币行情
In this tutorial, I will be building a live BTC exchange rate ticker by fetching the currency exchan ...
最新文章
- LINQ via C# 系列文章
- linux 终端 tty 简介
- Godaddy如何导入导出MSSQL数据库
- element vue 获取select 的label_vue+elementui实现省市区三级联动
- python娃娃_充气娃娃?Python告诉你到底有多爽......
- BZOJ 1020——[SHOI2008]安全的航线flight
- php取json子对象属性,PHP json获取相关对象值
- Java线程池(2) - 线程池的功能需求、设计、实现
- 哪些深度相机有python接口_用树莓派和YOLO打造一个深度学习照相机
- python中文版电脑下载-Python IDLE下载
- python能做什么项目-这十个Python实战项目,让你瞬间读懂Python!
- 代码管理(二)sourcetree 安装与使用
- c语言正确标识符怎么判断,判断C语言的标识符是否正确
- Oracle全局搜索
- AutoLayout -Masonry
- 小程序碰上浏览器搜索入口!
- Java毕设项目大学生租房平台(java+VUE+Mybatis+Maven+Mysql)
- 数据库_哈工大战德臣
- 计算机cpu、寄存器、内存区别
- IBM Installation Manager的卸载功能很强、很暴力!