利用socket.io+nodejs打造简单聊天室
代码地址如下:
http://www.demodashi.com/demo/11579.html
界面展示:
首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片。
ws说明:
在介绍socket.io之前,先简单介绍一下websocket:
Web Socket的目标是在一个单独的持久连接上提供全双工,双向通信
在JavaScript中建立了Web Socket之后,会有一个HTTP请求发送到浏览器以发送连接。取得服务器响应之后,建立的连接会使用HTTP升级从HTTP协议交换为WebSocket协议。WebSocket使用了自定义的协议,所以URL模式略有不同,未加密的是ws://,加密的是wss://,使用WebSocket的好处在于:可以在客户端和服务器端发送少量数据,减少开销,且由于全双工通信,适合即时应用。但是目前还达不到浏览器完全兼容。
Socket.IO
Socket.IO官网
官网列出了Socket.IO的四大优点:
* 实时分析:将数据推送到客户端,这些客户端会被表示为实时计数器,图表或日志客户。
* 实时通信和聊天:只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
* 二进制流传输:从1.0版本开始,Socket.IO支持任何形式的二进制文件传输,例如:图片,视频,音频等。
* 文档合并:允许多个用户同时编辑一个文档,并且能够看到每个用户做出的修改。
Socket.IO对于支持ws的浏览器将采用ws通信,对于不支持ws的将采用轮询方式,所以Socket.IO是一个非常适合做即时通讯的类库。
Socket.IO API
由于Socket.IO在不同版本中,API会略有不同,所以本文介绍依赖于1.4.5版本(2016.9.8)
官网对于API及用法介绍全面,在此只做简单总结:
* 1、安装:npm install socket.io
* 2、客户端:客户端需引用socket.io.js
“`
* 3、服务器端:demo中服务器端采用框架`express(~4.13.1)`,将引用模块命名为io
//引入模块
var server = app.listen(3000,function(){
console.log(‘Express.js server listening on port’+ app.get(‘port’));});
var io = require(‘socket.io’).listen(server);
//io使用
io.on(‘connection’, function (socket) {})
* 4、服务器端API
io.on(‘connection’,function(socket){});//建立连接
io.sockets.emit(约定参数,data);//向全体人员广播
io.emit(约定参数, data);//向全体人员广播
socket.emit(约定参数,data)//发送信息
socket.on(约定参数,callback);//接收信息
socket.on(‘disconnect’,callback);//用户断开连接触发事件
Socket.IO对于每一个连接用户会自动分配一个随机的,不重复的`Socket#id` ,通过`Socket#id`可以实现将信息分发给个人
var socketId = socket.id;
socket.broadcast.to(socketId ).emit(‘my message’, msg);//socket均为connect中回调函数中的socket
* 5、客户端API
socket.emit(约定参数,data)//发送信息
socket.on(约定参数,callback);//接收信息
* 6、Socket.IO还可以按照命名空间划分出不同的空间,详见[http://socket.io/docs/rooms-and-namespaces/](http://socket.io/docs/rooms-and-namespaces/)
####Demo介绍
package.json
{
“name”: “ezsocket”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “node app.js”
},
“dependencies”: {
“body-parser”: “~1.13.2”,
“cookie-parser”: “~1.3.5”,
“debug”: “~2.2.0”,
“express”: “~4.13.1”,
“jade”: “~1.11.0”,
“morgan”: “~1.6.1”,
“multiparty”:”4.1.2”,
“socket.io”:”1.4.5”,
“serve-favicon”: “~2.3.0”
}
}
框架及版本如上,视图采用jade模板,主要过程为用户进入聊天室先输入名字(未查重),点击确定后发送名字等信息,进入聊天页面,在文本框中输入,点击发送按钮,发送信息。接收服务器端的相应信息,对其处理,进行界面的展示。
(function(){
var socket=io.connect();(function(){ var socket=io.connect(); (‘.j_btn’).on(‘click’,function(){//进入页面确定按钮点击事件
console.log(8888);
var msg = (‘.j_nametext’).val();
socket.emit(‘login’,msg);//向服务器发送用户注册名字信息
})(‘.j_nametext’).val(); socket.emit(‘login’,msg);//向服务器发送用户注册名字信息 }) (‘#j_mesbtn’).on(‘click’,function(){//文本框按钮点击事件
var data = $(‘#j_msgtext’).html();
console.log(data);
var str = ‘
'+data+'
- ’
$(‘.right-top-ul’).append(str);
socket.emit(‘msg’,data);//向服务器发送文本框中信息
})
socket.on(‘system’,function(data){//接收服务器端信息
var str = ‘ - 欢迎??’+data+’??进入聊天室,撒花
- ‘;
$(‘.right-top-ul’).append(str);
});
socket.on(‘chat’,function(data){
console.log(data);
var str = ‘ - ‘+data.name+’
'+data.data+'
- ’
(‘.right-top-ul’).append(str);
})
socket.on(‘loginSuccess’,function(){//接收服务器端登录成功信息(‘.right-top-ul’).append(str); }) socket.on(‘loginSuccess’,function(){//接收服务器端登录成功信息 (‘.float-player’).css(‘display’,’none’);
$(‘.dialog’).css(‘display’,’none’);
});
socket.on(‘disconnect’,function(data){//接收服务器端发送的用户离开的信息
console.log(data);
var str = ‘ - ??’+data+’??离开了组织,愿他早日回到组织的怀抱
- ‘;
(‘.right-top-ul’).append(str);
});(‘.right-top-ul’).append(str); }); (‘#j_sendmsg’).on(‘change’,function(){//上传文件事件
// 判断上传文件类型
var objFile = (‘#j_sendmsg’).val();
var objType = objFile.substring(objFile.lastIndexOf(“.”)).toLowerCase();
var formData = new FormData(document.forms.namedItem(“test”));(‘#j_sendmsg’).val(); var objType = objFile.substring(objFile.lastIndexOf(“.”)).toLowerCase(); var formData = new FormData(document.forms.namedItem(“test”)); .ajax({
type : ‘post’,
url : ‘/uploadUserImgPre’,
data: formData ,
processData:false,
async:false,
cache: false,
contentType: false,
success:function(re){
re.imgSrc = re.imgSrc.replace(‘public’,”);
re.imgSrc = re.imgSrc.replace(/\/g,’\/’);
$(‘#j_msgtext’).append(‘[站外图片上传中……(4)]’)
},
error:function(re){
console.log(re);
}
});
});
})服务器端主要功能为 1、前方发送登录信息,服务器端接收并广播给全部用户,将登录成功信息传给客户端,客户端进行相应操作。 2、客户端通过发送按钮发送信息,服务器端收到后,广播给除非发送人员所有人。 3、用户离开,触发服务器端`disconnect`,服武器端广播给全体在线人员。 代码如下:
io.on(‘connection’, function(socket) {
console.log(socket.id);
var socketId = socket.id;
socket.on(‘login’,function(nickname){//接收登录
socket.nickname = nickname;
socket.emit(‘loginSuccess’);//发送登录成功信息
io.sockets.emit(‘system’, nickname);//广播
});
socket.on(‘msg’,function(data){//接收文本框中信息
console.log(data);
var sendMsg = {‘name’:socket.nickname,’data’:data}
socket.broadcast.emit(‘chat’,sendMsg);//广播
});
socket.on(‘disconnect’,function(){
io.sockets.emit(‘disconnect’, socket.nickname);
})
});
“`项目文件截图:
运行:
下载后再
package.json
所在位置打开命令行,通过npm install
安装依赖,安装好后通过node app.js
启动服务,在google浏览器中输入localhost:3000
总结:
本文对Socket.IO做了简单了解,若有不足或错误之处,还请多多指出。利用socket.io+nodejs打造简单聊天室
代码地址如下:
http://www.demodashi.com/demo/11579.html注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
利用socket.io+nodejs打造简单聊天室相关推荐
- node php聊天室,利用socket.io实现多人聊天室(基于Nodejs)
利用socket.io实现多人聊天室(基于Nodejs) socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这 ...
- ajax 多人聊天吧,基于Nodejs利用socket.io实现多人聊天室
socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧 ...
- PyQt5+socket+多线程,实现简单聊天室
之前从没想过自己设计一套网络聊天室出来,但网络原理实验的时候老师说:"谁做出来了,就给谁加分",于是我(内卷王)又开始(偷偷地背着全班同学)自己做起了这一个实验项目.实验项目的主要 ...
- 14级团队学习成果汇报 -- 利用express+socket.io搭建简易版聊天室
周鹏,14级数理系,信息与计算科学大三学生.在LSGO软件技术团队负责前端部分,本图文是他的一个完整作品,代码可在Github上下载.
- Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放
Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...
- 使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
- java web利用mvc结构实现简单聊天室功能
简单聊天室采用各种内部对象不适用数据库实现. 一个聊天室要实现的基本功能是: 1.用户登录进入聊天室, 2.用户发言 3.用户可以看见别人发言 刚才算是简单的需求分析了,现在就应该是进 ...
- c聊天室系统asp ajax,利用AJAX和ASP.NET实现简单聊天室
利用AJAX和ASP.NET实现简单聊天室 我的第一个简单的Chatroom是用ASP3.0写成的.那无外乎有二个TextBox,他们发送消息 给程序变量然后显示在一个每秒刷新的页面上.在那个时代,一 ...
- python socket 网络聊天室_Python基于Socket实现简单聊天室
本文实例为大家分享了Python基于Socket实现简单聊天室,供大家参考,具体内容如下 服务端 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Ti ...
最新文章
- python dataframe 中位数_python下的Pandas中DataFrame基本操作(一),基本函数整理
- Linux命令之ssh
- YOLOv5导出jit,onnx,engine
- sql server 语句自动补齐
- oracle中作业无法执行,Oracle运行JOB报ORA-27492:无法运行作业
- python编程入门免费_python编程入门 零基础学习Python基础(附带最新免费教程)...
- Android攻城狮SurfaceView
- leetcode43. 字符串相乘
- 央视消息 | 没考驾照的人可能要恭喜了!
- Datedifff返回两个日期之间的天数
- [Java] 蓝桥杯ALGO-145 算法训练 4-1打印下述图形
- 深度剖析什么是 SLI、SLO和SLA?
- 如何解决微服务架构中的身份验证问题?
- c++用两个队列实现一个栈
- 本人CSDN资源重传、0积分获取的方法以及重要声明(长期有效)
- 什么是静态测试、动态测试、黑盒测试、白盒测试、α测试 β测试?
- 考研408(操作系统、计算机组成原理、数据结构、计算机网络)
- linux mysql skip_skip-grant-tables 修改linux的mysql忘记root密码
- html怎么画表格边框,WEB 制作1px边框表格的几种方法
- 蓝凌生态OA,重新定义中大型企业数字化办公
热门文章
- java实现浏览器ui中的收藏夹_谷歌改进Google Chrome浏览器中的PDF浏览器 带来全新UI...
- MFC 获取其他窗口的Edit文本和单击Button
- TCP和UDP服务器性能测试工具
- 6410的系统时钟设置(下)---几个常用函数的C源码
- C++ - 深入理解new
- 第一次写CSDN的博客
- fastnest怎么一键排版_什么公众号排版编辑器可以换字体?公众号字体在哪里选择修改?...
- 3.4.3 深度探索linux,3.2.4 vmlinux.bin的构建过程(3)
- 《Reids 设计与实现》第七章 RDB 持久化
- 挑战练习6.4 报告编译版本