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

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

首先是登录页面:

接下来就是聊天页面:



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

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

  1. // bin/www
  2. var app = require('../app');
  3. var debug = require('debug')('websocket:server');
  4. var http = require('http');
  6. /**
  7.  * Get port from environment and store in Express.
  8.  */
  10. var port = normalizePort(process.env.PORT || '3070');
  11. app.set('port', port);
  13. /**
  14.  * Create HTTP server.
  15.  */
  17. var server = http.createServer(app);
  18. var io = require('socket.io').listen(server);   //创建 socket 服务
  19. io.on('connection',function(socket){            //监听客户端的连接请求
  20.   socket.emit('connected',"连接成功");
  21.   socket.on('message',function(msg){            //监听客户端发送的消息
  22.     console.log(msg);
  23.     socket.emit('content',msg);                 // 向客户端发送反馈消息
  24.     socket.broadcast.emit('content',msg);       // 向所有的已连接客户端进行广播消息
  25.   });
  26. });
  27. /**
  28.  * Listen on provided port, on all network interfaces.
  29.  */
  31. server.listen(port);
  32. server.on('error', onError);
  33. server.on('listening', onListening);
  34. ...
  35. ...

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

  1. //  routes/index.js
  2. var express = require('express');
  3. var router = express.Router();
  5. /* GET home page. */
  6. router.get('/', function(req, res) {
  7.   res.render('login');
  8. });
  9. router.post('/login',function(req,res){
  10.   var name=req.body.name;
  11.   req.session.name=name;
  12.   res.send("success");
  13. });
  14. router.get('/index',function(req,res){
  15.   if(req.session.name!=null && req.session.name!=""){
  16.     res.render('index',{name:req.session.name});
  17.   }else{
  18.     res.redirect('/');
  19.   }
  20. });
  21. module.exports = router;

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

  1. // views/login.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>登录简化聊天室</title>
  7.     <link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/>
  8.     <link rel="shortcut icon" href="images/chat.ico">
  9.     <link rel="icon" href="img/images/chat.ico">
  10.     <link rel="stylesheet" href="js/bootstrap.css" type="text/css" />
  11.     <style>
  12.         .tips{
  13.             font-size: 28px;
  14.             font-family: "楷体";
  15.             padding: 10px;
  16.         }
  17.         .contentMain{
  18.             width: 600px;
  19.             height: 500px;
  20.             position:absolute;
  21.             left:35%;
  22.             top:40%;
  23.             z-index: 999;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="loginImg" style="margin: 4% 0;">
  29.     <img src="images/005.jpg" style="width: 100%;"/>
  30. </div>
  32. <div class="contentMain">
  33.     <div class="row tips">请先输入你在聊天室的昵称 </div>
  34.     <div class="row form-group">
  35.         <span class="col-md-6">
  36.             <input type="text" id="name" class="form-control" placeholder="昵称"/>
  37.         </span>
  38.         <span class="col-md-3">
  39.             <button class="btn btn-default" id="login">确认</button>
  40.         </span>
  41.     </div>
  42. </div>
  43. <script type="text/javascript" src="js/jquery.js"></script>
  44. <script type="text/javascript" src="js/bootstrap.js"></script>
  45. <script>
  46.     $(function(){
  47.        $('button').click(function(){
  48.            var name=$('#name').val();
  49.            $.post('/login',{name:name},function(data){
  50.                if(data=="success"){
  51.                    window.location.href='/index';
  52.                }
  53.            });
  54.        })
  55.     });
  56. </script>
  57. </body>
  58. </html>

聊天室页面:

  1. //  views/index.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>简化聊天室</title>
  7.     <link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/>
  8.     <link rel="shortcut icon" href="images/chat.ico">
  9.     <link rel="icon" href="img/images/chat.ico">
  10.     <link rel="stylesheet" href="js/bootstrap.css" type="text/css" />
  11.     <style>
  12.         body{
  13.             font-size: 20px;
  14.             font-family: "楷体";
  15.         }
  16.         .contentMain{
  17.             width: 700px;
  18.             height: 800px;
  19.             position:absolute;
  20.             left:5%;
  21.             top:6%;
  22.             z-index: 999;
  23.         }
  24.         .welcome{
  25.             height: 6%;
  26.             font-family: "楷体";
  27.             font-size:35px;
  28.             background-color: #d0e9c6;
  29.         }
  30.         .chatContent{
  31.             height:600px;
  32.             border-radius: 5px;
  33.             border: 1px solid #555555;
  34.             overflow-y: auto;
  35.             overflow-x: hidden;
  36.             padding: 5px;
  37.             margin-bottom: 20px;
  38.         }
  39.         .talkString{
  40.             margin-top:15px;
  41.         }
  42.         .myTalk{
  43.             border:1px solid #00B7FF;
  44.             border-radius: 5px;
  45.             width: auto;
  46.             padding: 5px;
  47.             background-color: #d6e9c6;
  48.         }
  49.         #content{
  50.             padding:2px 10px 2px 10px;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55. <div class="welcome" align="center">
  56.     欢迎您: <span id="name"><%=name%></span>
  57. </div>
  58. <div class="bgImage">
  59.     <img src="images/005.jpg" style="width: 100%;height: 100%"/>
  60. </div>
  61. <div class="contentMain">
  63.     <div class="chatContent">
  64.         <span>聊天记录:</span>
  65.         <div id="content"></div>
  66.     </div>
  67.     <div class="row">
  68.         <span class="col-md-10">
  69.             <span class="col-md-2"> 内容:</span>
  70.             <span class="col-md-10">
  71.                 <input type="text" id="myWord" class="form-control" placeholder="请输入要发送的内容"/>
  72.             </span>
  73.         </span>
  74.         <span class="col-md-2">
  75.             <button class="btn btn-default">发送</button>
  76.         </span>
  77.     </div>
  78. </div>
  80. <script type="text/javascript" src="js/jquery.js"></script>
  81. <script type="text/javascript" src="js/socket.io.js"></script>
  82. <script type="text/javascript" src="js/bootstrap.js"></script>
  83. <script type="text/javascript" src="js/main.js"></script>
  84. </body>
  85. </html>

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

  1. //   js/main.js
  2. $(function(){
  3. 	var name = $('#name').text();
  4.     // 向服务器发起连接请求
  5. 	var socket = io.connect('http://localhost:3070');
  6. 	socket.on('connected',function(){  // 监听连接信息
  7. 		console.log('已连接');
  8. 		socket.send("系统："+name+" 连接成功");   // 向客户端发送消息
  9. 	});
  10. 	socket.on('content',function(msg){          // 监听服务器发送的消息
  11. 		var talker="";
  12. 		var talk="";
  13. 		var talkString="";
  14. 		if(msg.indexOf(':')>0){
  15. 			talker=msg.substring(0,msg.indexOf(':'));
  16. 			if(msg.indexOf("<script>")>0&&msg.indexOf("</script>")>0) {
  17. 				msg = msg.replace("<script>", "");
  18. 				msg = msg.replace("</script>", "");
  19. 			}
  20. 			talk=msg.substring(msg.indexOf(':')+1);
  21. 			if(talker==name){
  22. 				talkString="<div class='row talkString' align='right'>" +
  23. 					"<span class='myTalk'>"+talk+"</span>" +
  24. 					"<span> "+talker+"</span>" +
  25. 					"</div>";
  26. 			}else{
  27. 				talkString="<div class='row talkString'>" +
  28. 					"<span>"+talker+": </span>" +
  29. 					"<span class='myTalk'>"+talk+"</span>" +
  30. 					"</div>";
  31. 			}
  32. 		}else{
  33. 			talkString="<div class='row'>"+msg+"</div>";
  34. 		}
  35. 		$('#content').append(talkString);
  36. 		scrollBar();
  37. 	});
  38. 	$('button').click(function(){
  39. 		var myWord=$('#myWord').val();
  41. 		if(socket){
  42. 			socket.send(name+":"+myWord);
  43. 			$('#myWord').val("");
  44. 			scrollBar();
  45. 		}else{
  46. 			return;
  47. 		}
  48. 	});
  49. 	//回车发送消息
  50. 	document.onkeydown = function(e){
  51. 		var ev = document.all ? window.event : e;
  52. 		if(ev.keyCode==13) {
  53. 			$('button').click();
  54. 		}
  55. 	}
  57. 	function scrollBar(){
  58. 		$(".chatContent").scrollTop($(".chatContent")[0].scrollHeight);
  59. 	}
  60. });

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

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

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

项目结构:

控制台信息:

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

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

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

Express+Socket.IO 实现简易聊天室的更多相关文章

  1. node+express+socket.io制作一个聊天室功能

    首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http ...

  2. 示例：Socket应用之简易聊天室

    在实际应用中,Server总是在指定的端口上监听是否有Client请求,一旦监听到Client请求,Server就会启动一个线程来响应该请求,而Server本身在启动完线程之后马上又进入监听状态. 示 ...

  3. 使用socket.io打造公共聊天室

    最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...

  4. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  5. 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...

  6. Socket.io文字直播聊天室的简单代码

    直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...

  7. socket.io 实现简易聊天

    客户端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  9. Socket实现简易聊天室，Client，Server

    package seday08; import java.io.BufferedWriter;import java.io.OutputStream;import java.io.OutputStre ...

随机推荐

  1. GDOI2018 爆零记，Challenge Impossibility

    蒟蒻的GDOI又双叒叕考挂啦...... Day 0 && Day -1 学校月考,貌似考的还不错? 然而考完试再坐船去中山实在是慢啊......晚上10点才到酒店 wifi差评... ...

  2. Java注解解析-搭建自己的注解处理器（CLASS注解使用篇）

    该文章是继Java注解解析-基础+运行时注解(RUNTIME)之后,使用注解处理器处理CLASS注解的文章.通过完整的Demo例子介绍整个注解处理器的搭建流程以及注意事项,你将知道如何去搭建自己的注解 ...

  3. 笔记：CS231n+assignment2（作业二）（一）

    第二个作业难度很高,但做(抄)完之后收获还是很大的.... 一.Fully-Connected Neural Nets 首先是对之前的神经网络的程序进行重构,目的是可以构建任意大小的全连接的neura ...

  4. poj 3053 优先队列处理

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 39029   Accepted: 12681 De ...

  5. SQLite-FMDatabase用法

    FMDatabase用法 转载 http://blog.sina.com.cn/s/blog_94d94f1a01015gcr.html 以下是FMDB的一些基本使用,FMDB框架其实只是一层很薄的封 ...

  6. CAS统一认证系统学习

    Yale CAS(耶鲁集中认证服务)简介 http://www.5iops.com/html/2012/sso_0713/181.html 单点登陆框架CAS的研究 http://www.cnblog ...

  7. AC日记——[HAOI2007]理想的正方形 P2216

    [HAOI2007] 理想的正方形 思路: 正解多个单调队列: 但是我用树套树水了过去: 来,上代码: #include <cstdio> #include <cstring> ...

  8. AC日记——N的倍数 51nod 1103

    1103 N的倍数 思路: 先计算出前缀和: 然后都%n: 因为有n个数,所以如果没有sum[i]%n==0的化,一定有两个取模后的sum相等: 输出两个sum中间的数就好: 来,上代码: #incl ...

  9. asp.net mvc 自定义模型绑定

    在asp.net mvc的控制器中如果能够活用模型的自动绑定功能的话能够减少许多工作量.但是如果我们想要对前台传来的数据进行一些处理再绑定到模型上,该怎么做呢? 这里用一个绑定用户数据的小案例来讲解a ...

  10. HashMap之equals和hashCode小陷阱

    先以一段代码开始这篇blog. 01 public class Name { 02   03   private String first; //first name 04   private Str ...