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="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 实现简易聊天室

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

注：本文著作权归作者，由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 ...

随机推荐

【bzoj1415】[Noi2005]聪聪和可可期望记忆化搜索
题目描述输入数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行 ...
iOS多线程：『GCD』详尽总结 ---（转）
文章:https://bujige.net/blog/iOS-Complete-learning-GCD.html 文中 Demo 我已放在了 Github 上,Demo 链接:https://git ...
博客移至CSDN
CSDN博客地址:http://blog.csdn.net/pilihaotian 博客园看心情更新.
mysql-count与sum
参考:https://www.jb51.net/article/141238.htm 建立时间临时辅助表:https://blog.csdn.net/qq_36226453/article/detai ...
《Linux命令行与shell脚本编程大全第3版》Linux命令行---26
以下为阅读<Linux命令行与shell脚本编程大全第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
《Linux命令行与shell脚本编程大全第3版》Linux命令行---16
以下为阅读<Linux命令行与shell脚本编程大全第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
arduino ide的串口权限解决
刚刚到手一个Arduino uno R3的板子,windows下arduino IDE的串口正常使用,linux下却出现权限问题,解决方案如下:(以下操作使用超级用户) 1.查看设备所在的组ls -l ...
Selenium2+python自动化（学习笔记3）
1.加载firefox配置参考代码: # coding=utf-8from selenium import webdriver# 配置文件地址,打开Firefox点右上角设置--帮助--故障排除信息 ...
Bitmap类
一．Bitmap类 Bitmap对象封装了GDI+中的一个位图,此位图由图形图像及其属性的像素数据组成.因此Bitmap是用于处理由像素数据定义的图像的对象.该类的主要方法和属性如下: 1. GetP ...
JavaScripts广告轮播图以及定时弹出和定时隐藏广告
轮播图: 函数绑定在body标签内采用3张图,1.jpg 2.jpg 3.jpg 利用定时任务执行设置图片属性 src 利用for循环可以完成3秒一次一替换. 定时弹出广告: 由于bod ...

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

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

随机推荐

热门专题