Express+Socket.IO 实现简易聊天室
闲暇之余研究了一下 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="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="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 实现简易聊天室
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
Express+Socket.IO 实现简易聊天室的更多相关文章
- node+express+socket.io制作一个聊天室功能
首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http ...
- 示例：Socket应用之简易聊天室
在实际应用中,Server总是在指定的端口上监听是否有Client请求,一旦监听到Client请求,Server就会启动一个线程来响应该请求,而Server本身在启动完线程之后马上又进入监听状态. 示 ...
- 使用socket.io打造公共聊天室
最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- socket.io 实现简易聊天
客户端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- Socket实现简易聊天室，Client，Server
package seday08; import java.io.BufferedWriter;import java.io.OutputStream;import java.io.OutputStre ...
随机推荐
- linux服务器上设置多主机头，设置多web站点
假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修改/etc/httpd/conf/httpd.conf,在文件的最后加入 ...
- [LOJ#2329]「清华集训 2017」我的生命已如风中残烛
[LOJ#2329]「清华集训 2017」我的生命已如风中残烛 试题描述 九条可怜是一个贪玩的女孩子. 这天她在一堵墙钉了 \(n\) 个钉子,第 \(i\) 个钉子的坐标是 \((x_i,y_i)\ ...
- hdu3586 Information Disturbing 【树形dp】
题目链接 hdu3586 题解 二分 + 简单的树形dp 我正有练一下dp的必要了 #include<iostream> #include<cstdio> #include&l ...
- JAVA 字节流和字符流度读写的区别
java处理文件的类里面,stream结尾都是采用字节流,reader和writer结尾都是采用字符流.两者的区别就是读写的时候一个是按字节读写,一个是按字符. 字符流的底层就是字节流.而字符流主要是 ...
- 开发人员为组件添加自定义的className
在开发过程当中需要给组件写上自己的样式,这个时候怎么办呢? 直接给组件添加className这样是无效的 当给组件添加className之后 在写组件的时候需要对使用你的组件的开发人员提供自定义cla ...
- Linux中的小括号和大括号，${}/$()/()/{}/${var:-string}/${var:=string}/${var:+string}/${var:?string}/${var%pattern}/${var#pattern}/${var%%pattern}/${var##pattern}
简单记录一下大小括号在Linux中的用处. 1.${var},这是Linux中变量的原形.所以$var,别忘记了你的本来面目. # a= # echo $a # echo ${a} # echo ${ ...
- Linux脚本中调用SQL,RMAN脚本
Linux/Unix shell脚本中调用或执行SQL,RMAN 等为自动化作业以及多次反复执行提供了极大的便利,因此通过Linux/Unix shell来完成Oracle的相关工作,也是DBA必不可 ...
- Iframe载入页面 及 跳转页面
原文发布时间为:2009-05-05 -- 来源于本人的百度文章 [由搬家工具导入] 第一个文件 frame1.html <!DOCTYPE html PUBLIC "-//W3C// ...
- 各种版本QT下载地址与VS2013+QT5.3.1环境搭建过程（转）
原文转自 http://blog.csdn.net/baidu_34678439/article/details/54586058 1. 所有Qt版本下载地址: http://download.qt. ...
- Program "D:\AndroidDevelopment\android-ndk-r9\ndk-build.cmd" not found in PATH
1.问题描述 2.解决方法:修改ndk-build.cmd的配置路径, 修改成本地ndk-build.cmd所在路径,如下