博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Express+Socket.IO 实现简易聊天室
阅读量:7210 次
发布时间:2019-06-29

本文共 4101 字,大约阅读时间需要 13 分钟。

代码地址如下:

logo

闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图:

首先是登录页面:

login

接下来就是聊天页面:

chatmsg1

chatmsg2

Socket.IO是Node.js的一个模块,它提供通过WebSocket进行通信的一种简单方式,WebSocket协议很复杂,但是Socket.IO提供了服务器和客户端双方的组件,所以只需要一个模块就可以给应用程序加入对WebSocket的支持,而且还能支持不同的浏览器哦。关于其详细介绍请参考官网,这里呢我们还是直接上代码。

首先是创建 Socket 服务, 我们的项目启动文件 bin/www,我们就来修改它:

// bin/wwwvar app = require('../app');var debug = require('debug')('websocket:server');var http = require('http');/** * Get port from environment and store in Express. */var port = normalizePort(process.env.PORT || '3070');app.set('port', port);/** * Create HTTP server. */var server = http.createServer(app);var io = require('socket.io').listen(server);   //创建 socket 服务io.on('connection',function(socket){            //监听客户端的连接请求  socket.emit('connected',"连接成功");  socket.on('message',function(msg){            //监听客户端发送的消息    console.log(msg);       socket.emit('content',msg);                 // 向客户端发送反馈消息    socket.broadcast.emit('content',msg);       // 向所有的已连接客户端进行广播消息  });});/** * Listen on provided port, on all network interfaces. */server.listen(port);server.on('error', onError);server.on('listening', onListening);......

在这里我做了一个小的登录控制,也就是 session 的简单使用,具体看下边的路由控制:

//  routes/index.jsvar express = require('express');var router = express.Router();/* GET home page. */router.get('/', function(req, res) {  res.render('login');});router.post('/login',function(req,res){  var name=req.body.name;  req.session.name=name;  res.send("success");});router.get('/index',function(req,res){  if(req.session.name!=null && req.session.name!=""){    res.render('index',{name:req.session.name});  }else{    res.redirect('/');  }});module.exports = router;

然后接下来创建客户端登录页面:

// views/login.html    
登录简化聊天室
请先输入你在聊天室的昵称

聊天室页面:

//  views/index.html    
简化聊天室
欢迎您:
<%=name%>
聊天记录:
内容:

最后实现我们客户端的 socket,进行与服务端进行通信:

//   js/main.js$(function(){    var name = $('#name').text();    // 向服务器发起连接请求    var socket = io.connect('http://localhost:3070');    socket.on('connected',function(){  // 监听连接信息        console.log('已连接');        socket.send("系统:"+name+" 连接成功");   // 向客户端发送消息    });    socket.on('content',function(msg){          // 监听服务器发送的消息        var talker="";        var talk="";        var talkString="";        if(msg.indexOf(':')>0){            talker=msg.substring(0,msg.indexOf(':'));            if(msg.indexOf("")>0) {                msg = msg.replace("", "");            }            talk=msg.substring(msg.indexOf(':')+1);            if(talker==name){                talkString="
" + "
"+talk+"" + "
"+talker+"" + "
"; }else{ talkString="
" + "
"+talker+": " + "
"+talk+"" + "
"; } }else{ talkString="
"+msg+"
"; } $('#content').append(talkString); scrollBar(); }); $('button').click(function(){ var myWord=$('#myWord').val(); if(socket){ socket.send(name+":"+myWord); $('#myWord').val(""); scrollBar(); }else{ return; } }); //回车发送消息 document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { $('button').click(); } } function scrollBar(){ $(".chatContent").scrollTop($(".chatContent")[0].scrollHeight); }});

至此,我们的主要工作基本上完成了,其实也没有多少东西

  • 创建 socket 服务器,监听客户端连接与消息,发送消息、广播消息
  • socket客户端向服务器申请连接,发送与监听消息

这次只是做了一个简易的聊天室功能,下次我们加入 redis 的 订阅/发布 模式,完成更复杂更灵活的聊天功能,敬请期待!

项目结构:

codelist

控制台信息:

consolelogExpress+Socket.IO 实现简易聊天室

代码地址如下:

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

你可能感兴趣的文章
利用Python对QQ空间数据进行分析,了解你的QQ好友
查看>>
SQL Server [备份恢复]:完整备份,差异备份或事务日志备份,尾部日志备份
查看>>
System Center 2012 R2实例2—构建Azure Pack云13—租户NAT
查看>>
Git基础入门(七)Git撤销操作和远程仓库管理
查看>>
开始OpenCV之旅
查看>>
解决github.com/mattn/go-sqlite3 驱动中的utc时区变为本地系统时...
查看>>
Fabric.js高级点的教程1--添加辅助线的方法
查看>>
2011年 Linux 故事 Top 5
查看>>
ARouter 源码历险记 (五)
查看>>
优化Angular应用的性能
查看>>
php字符串函数
查看>>
[IOS] 自颁发证书不合法问题
查看>>
MYSQL常用命令
查看>>
Java中使用Jedis操作Redis
查看>>
play2.0实现新浪OAuth2.0
查看>>
QT:使用“状态模式”绘制界面 参考的一种面向对象的绘制图片的方法
查看>>
for 循环 里面 save 的问题
查看>>
常用 arm 汇编指令
查看>>
如何用_R_语言的_Shiny_库编写_web_程序
查看>>
mysql初步入门
查看>>