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

代码地址如下：
http://www.demodashi.com/demo/12477.html

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

接下来就是聊天页面:

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

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

// bin/www
var 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.js
var 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
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>登录简化聊天室</title><link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/><link rel="shortcut icon" href="images/chat.ico"><link rel="icon" href="img/images/chat.ico"><link rel="stylesheet" href="js/bootstrap.css" type="text/css" /><style>.tips{font-size: 28px;font-family: "楷体";padding: 10px;}.contentMain{width: 600px;height: 500px;position:absolute;left:35%;top:40%;z-index: 999;}</style>
</head>
<body>
<div class="loginImg" style="margin: 4% 0;"><img src="data:images/005.jpg" style="width: 100%;"/>
</div><div class="contentMain"><div class="row tips">请先输入你在聊天室的昵称 </div><div class="row form-group"><span class="col-md-6"><input type="text" id="name" class="form-control" placeholder="昵称"/></span><span class="col-md-3"><button class="btn btn-default" id="login">确认</button></span></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>$(function(){$('button').click(function(){var name=$('#name').val();$.post('/login',{name:name},function(data){if(data=="success"){window.location.href='/index';}});})});
</script>
</body>
</html>

聊天室页面:

//  views/index.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>简化聊天室</title><link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/><link rel="shortcut icon" href="images/chat.ico"><link rel="icon" href="img/images/chat.ico"><link rel="stylesheet" href="js/bootstrap.css" type="text/css" /><style>body{font-size: 20px;font-family: "楷体";}.contentMain{width: 700px;height: 800px;position:absolute;left:5%;top:6%;z-index: 999;}.welcome{height: 6%;font-family: "楷体";font-size:35px;background-color: #d0e9c6;}.chatContent{height:600px;border-radius: 5px;border: 1px solid #555555;overflow-y: auto;overflow-x: hidden;padding: 5px;margin-bottom: 20px;}.talkString{margin-top:15px;}.myTalk{border:1px solid #00B7FF;border-radius: 5px;width: auto;padding: 5px;background-color: #d6e9c6;}#content{padding:2px 10px 2px 10px;}</style>
</head>
<body>
<div class="welcome" align="center">欢迎您: <span id="name"><%=name%></span>
</div>
<div class="bgImage"><img src="data:images/005.jpg" style="width: 100%;height: 100%"/>
</div>
<div class="contentMain"><div class="chatContent"><span>聊天记录:</span><div id="content"></div></div><div class="row"><span class="col-md-10"><span class="col-md-2"> 内容:</span><span class="col-md-10"><input type="text" id="myWord" class="form-control" placeholder="请输入要发送的内容"/></span></span><span class="col-md-2"><button class="btn btn-default">发送</button></span></div>
</div><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

最后实现我们客户端的 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("<script>")>0&&msg.indexOf("</script>")>0) {msg = msg.replace("<script>", "");msg = msg.replace("</script>", "");}talk=msg.substring(msg.indexOf(':')+1);if(talker==name){talkString="<div class='row talkString' align='right'>" +"<span class='myTalk'>"+talk+"</span>" +"<span> "+talker+"</span>" +"</div>";}else{talkString="<div class='row talkString'>" +"<span>"+talker+": </span>" +"<span class='myTalk'>"+talk+"</span>" +"</div>";}}else{talkString="<div class='row'>"+msg+"</div>";}$('#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 的订阅/发布模式，完成更复杂更灵活的聊天功能，敬请期待!

项目结构:

控制台信息:
Express+Socket.IO 实现简易聊天室

代码地址如下：
http://www.demodashi.com/demo/12477.html

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

Express+Socket.IO 实现简易聊天室相关推荐

node+socket.io+HTTP简易聊天室
用node+socket.io+HTTP做一个聊天室.聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html). 文件目录如下所示: (node_modules文件夹以及p ...
Socket编程实现简易聊天室
1.Socket基础知识 Socket(套接字)用于描述IP地址和端口,是通信链的句柄,应用程序可以通过Socket向网络发出请求或者应答网络请求. Socket是支持TCP/IP协议的网络通信的基本 ...
基于socket.io的web聊天室
基于socket.io的web聊天室一. 项目介绍该项目使用node.js作为后端服务器框架,并利用socket.io来实现web聊天室功能.socket.io是由 JavaScript 实现的基 ...
node+socket.io 实现一个聊天室
我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架因此依赖只有两个: 1.socket.io 2.mime(用于获取静态资源时获取文件的mime类型) 安装命令: n ...
php做群聊功能,使用socket.io 实现群聊天室
本篇向大家分享一个socket.io的使用实例,实现群聊天的功能.如果想使用socket.io那么必须借助于nodejs来实现服务端,因此我们需要在nodejs中安装socket.io 安装socke ...
Node.js笔记-使用socket.io构建websocket聊天室
先安装socket.io npm install socket.io 服务端代码: let app = require('http').createServer(); let io = require ...
14级团队学习成果汇报 -- 利用express+socket.io搭建简易版聊天室
周鹏,14级数理系,信息与计算科学大三学生.在LSGO软件技术团队负责前端部分,本图文是他的一个完整作品,代码可在Github上下载.
vue+express+socket.io 实现qq聊天群。。。。
先上个图.... 晚点有空写个安装使用... github 地址代码
express+socket简易聊天室
文章目录简易聊天室前置知识这里使用socket.io实现前端设置前端代码后端代码效果图娱乐一刻简易聊天室前置知识在我们平常的时候,ajax发送的都是短连接,get完成或者post ...

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

Express+Socket.IO 实现简易聊天室相关推荐

最新文章

热门文章