node.js+express+socket的聊天室示例

原创 2015年11月18日 12:09:20

1.首先设定界面元素,主要包括:两大部分
左侧:聊天室标题 用户名输入框 登录按钮 退出按钮 消息输入框 发送按钮 消息及通知显示列表
右侧:用户列表
2.监听事件:登录监听事件 退出监听事件 发送消息监听事件
3.编写界面显示的代码:在/views/index.jade 中书写界面代码
css代码
脚本控制代码
界面html代码
4.介绍一下脚本控制代码和服务器端的控制代码吧~

 var http = require('http');  //加载http模块
 var express = require('express');   //加载express模块
 var sio = require('socket.io');     //加载socket.io的模块
 var fs = require('fs');     //加载文件模块(这里没有用到)
 var app = express();
 var server = http.createServer(app);   //创建服务器
 server.listen(4444);  //设置服务器监听端口号
var io = sio.listen(server);  //创建socket服务监听服务器

var names = []; //定义用户名数组

io.sockets.on('connection',function(socket){  //socket连接
  socket.on('login',function(name){       //登录 'login'标签  function(name){} 回调函数 name为传入的参数
    for(var i = 0; i < names.length;i++){  //检查用户名与已经存在的用户名是否有重复
      if(names[i] === name){
        socket.emit('duplicate');
        return;
      }
    }
    names.push(name);   // 将用户名推入到用户名堆栈
    io.sockets.emit('login',name);  //将处理结果发送给客户端
    io.sockets.emit('sendClients',names);  //
  });
  socket.on('chat',function(data){    // 聊天连接
    io.sockets.emit('chat',data);      //发送给客户端聊天数据
  });
  socket.on('logout',function(name){    //退出登录
    for(var i = 0; i < names.length;i++){   //用户列表删除该用户
      if(names[i] === name){
        names.splice(i,1);
        break;
      }
    }
    socket.broadcast.emit('logout',name);   //广播给除自己之外的其他客户,该用户退出
    io.sockets.emit('sendClients',names);   //发送个客户该请求
  });
});

说一下socket.broadcast.emit(‘xxx’,param) 和 io.sockets.on(‘xxx’,function(){
})的区别
broadcast
不包括自己的其他开启服务者
sockets
是发给所有人,即是包括自己且所有开启本客户服务的人

emit 与 on
emit 是接收客户端请求
on 发送请求给服务器

以下是jade页面的脚本代码

var userName,socket,tbxUsername,tbxMsg,divChat;    //username 用户名 socekt socket服务  tbxUsername 用户名  tbxMsg 输入的消息 divChat 消息框
         function window_onload(){                //页面加载时执行该函数,获取元素
            divChat = document.getElementById('divChat');
            tbxUsername = document.getElementById('tbxUsername');
            tbxMsg = document.getElementById('tbxMsg');
            tbxUsername.focus();
            tbxUsername.select();
         }
         function AddMsg(msg){                 //输入消息时将消息显示到消息列表中
            divChat.innerHTML+= msg+'<br>';
            if(divChat.scrollHeight > divChat.clientHeight)
               divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight;
         }
         function btnLogin_onclick(){       //登录的处理
            if(tbxUsername.value.trim()==''){     //trim()去除输入的空格  如果输入为空,则提示
               alert('请输入用户名!');
               return;
            }
            userName = tbxUsername.value.trim();
            socket = io.connect();            //创建socket服务连接
            socket.on('connect',function(){
               AddMsg('与聊天服务器的链接已经建立!');
               socket.on('login',function(name){     //用户登录通知
                  AddMsg('欢迎用户'+name + '进入聊天室');
               });
               socket.on('sendClients',function(names){     //在用户列表中加入新登录的用户名
                  var divRight = document.getElementById('divRight');
                  var str = '';
                  names.forEach(function(name){
                     str+=name+'<br/>';
                  });
                  divRight.innerHTML = '用户列表<br/>';
                  divRight.innerHTML+=str;
               });
               socket.on('chat',function(data){     //消息列表显示
                  AddMsg(data.user+'说:'+data.msg);
               });
               socket.on('disconnect',function(){
                  AddMsg('与聊天服务器的链接已断开!');
                  document.getElementById('btnSend').disabled = true;
                  document.getElementById('btnLogout').disabled = true;
                  document.getElementById('btnLogin').disabled = "";
                  var divRight = document.getElementById('divRight');
                  divRight.innerHTML = '用户列表';
               });
               socket.on('logout',function(name){
                  AddMsg('用户:'+ name + '已退出聊天室!');
               });
               socket.on('duplicate',function(){
                  alert('该用户名已被使用!');
                  document.getElementById('btnSend').disabled = true;
                  document.getElementById('btnLogout').disabled = true;
                  document.getElementById('btnLogin').disabled = "";
               });
            });
            socket.on('error',function(err){     //错误处理
               AddMsg('与聊天室服务器之间的链接发生错误!');
               socket.disconnect();    //断开连接
               socket.removeAllListeners('connect');  //删除所有socket监听事件
               io.sockets = {};
            });
            socket.emit('login',userName);   //向服务器发送用户登录请求
            document.getElementById('btnSend').disabled = '';
            document.getElementById('btnLogout').disabled = '';
            document.getElementById('btnLogin').disabled = true;
         }
         function btnSend_onclick(){     //发送消息
            var msg = tbxMsg.value;
            if(msg.length>0){
               socket.emit('chat',{user:userName,msg:msg});
               tbxMsg.value = '';
            }
         }
         function btnLogout_onclick(){
            socket.emit('logout',userName);
            socket.disconnect();
            socket.removeAllListeners('connect');
            io.sockets = {};
            AddMsg('用户'+userName+'退出聊天室');
            var divRight = document.getElementById('divRight');
            divRight.innerHTML = '用户列表';
            document.getElementById('btnSend').disabled = 'disabled';
            document.getElementById('btnLogout').disabled = 'disabled';
            document.getElementById('btnLogin').disabled = '';
         }
         function window_onunload(){
            socket.emit('logout',userName);
            socket.disconnect();
         }

下面贴上完整的代码:
首先基于node.js+express开发的聊天室,不需要数据库链接,用webstrom新建一个express项目,使用jade,在/views/index.jade文件中写下如下代码:

doctype html
html(lang='en')
   head
      meta(charset='UTF-8')
      title Socket.IO聊天室
      style.
         h1{
            font-family:Arial,Helvetica,sans-serif;
            font-weigth:bold;
            color:#006bb5;
            background-color: #f0f0f0;
            -moz-border-radius: 5px;
            border:1px solid #f0f0f0 ;
            padding: 5px 5px 5px 5px;
            margin: 0px 0px 18px 0px;
         }
         div[div^=divContainer]{
            border:0px;
            margin:10px 0px 10px 0px;
            padding:3px;
            background-color: #f0f0f0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
         }
         div#divLeft{
            width:15%;
            background-color: #f0f0f0 ;
            float: left;
         }
         div#divRight{
            width:15%;
            background-color: white ;
            float: right;
            font-weight: bold;
            font-size: 12px;
         }
         div#divChat{
            border:0px;
            margin: 0px 0px 10px 0px;
            padding:3px;
            background-color: #f0f0f0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            position: relative;
            height:300px;
            overflow: auto;
            font-size: 12px;;
         }
         table.tbDlg{
            font-family:Verdana,Helvetica,sans-serif;
            font-weight:normal;
            font-size:12px;
            background-color: #f0f0f0;
         }
         tr.trDlg,td.tdDlg{
            background-color: #f0f0f0;
            font-size: 10px;
         }
         textarea{
            font-family: inherit;
            font-size:10pt;
            border:1px solid #444;
            background-color: white;
            width: 100%;
         }
         input[type='button']{
            font-family: inherit;
            border:1px solid #808080;
            background-color: #81a0b5;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            margin:1px;
            color: white;
            width:100px;
         }
         input[type='button']:hover{
            background-color: #006bb5;
            margin:1px;
         }
         input[type='button']:active{
            font-weight: bold;
            background-color: #006bb5;
            margin:1px;
         }
         input[type='button']:focus{
            font-weight: bold;
            background-color: #006bb5;
            margin:0px;
         }
      script.
         var userName,socket,tbxUsername,tbxMsg,divChat;
         function window_onload(){
            divChat = document.getElementById('divChat');
            tbxUsername = document.getElementById('tbxUsername');
            tbxMsg = document.getElementById('tbxMsg');
            tbxUsername.focus();
            tbxUsername.select();
         }
         function AddMsg(msg){
            divChat.innerHTML+= msg+'<br>';
            if(divChat.scrollHeight > divChat.clientHeight)
               divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight;
         }
         function btnLogin_onclick(){
            if(tbxUsername.value.trim()==''){
               alert('请输入用户名!');
               return;
            }
            userName = tbxUsername.value.trim();
            socket = io.connect();
            socket.on('connect',function(){
               AddMsg('与聊天服务器的链接已经建立!');
               socket.on('login',function(name){
                  AddMsg('欢迎用户'+name + '进入聊天室');
               });
               socket.on('sendClients',function(names){
                  var divRight = document.getElementById('divRight');
                  var str = '';
                  names.forEach(function(name){
                     str+=name+'<br/>';
                  });
                  divRight.innerHTML = '用户列表<br/>';
                  divRight.innerHTML+=str;
               });
               socket.on('chat',function(data){
                  AddMsg(data.user+'说:'+data.msg);
               });
               socket.on('disconnect',function(){
                  AddMsg('与聊天服务器的链接已断开!');
                  document.getElementById('btnSend').disabled = true;
                  document.getElementById('btnLogout').disabled = true;
                  document.getElementById('btnLogin').disabled = "";
                  var divRight = document.getElementById('divRight');
                  divRight.innerHTML = '用户列表';
               });
               socket.on('logout',function(name){
                  AddMsg('用户:'+ name + '已退出聊天室!');
               });
               socket.on('duplicate',function(){
                  alert('该用户名已被使用!');
                  document.getElementById('btnSend').disabled = true;
                  document.getElementById('btnLogout').disabled = true;
                  document.getElementById('btnLogin').disabled = "";
               });
            });
            socket.on('error',function(err){
               AddMsg('与聊天室服务器之间的链接发生错误!');
               socket.disconnect();
               socket.removeAllListeners('connect');
               io.sockets = {};
            });
            socket.emit('login',userName);
            document.getElementById('btnSend').disabled = '';
            document.getElementById('btnLogout').disabled = '';
            document.getElementById('btnLogin').disabled = true;
         }
         function btnSend_onclick(){
            var msg = tbxMsg.value;
            if(msg.length>0){
               socket.emit('chat',{user:userName,msg:msg});
               tbxMsg.value = '';
            }
         }
         function btnLogout_onclick(){
            socket.emit('logout',userName);
            socket.disconnect();
            socket.removeAllListeners('connect');
            io.sockets = {};
            AddMsg('用户'+userName+'退出聊天室');
            var divRight = document.getElementById('divRight');
            divRight.innerHTML = '用户列表';
            document.getElementById('btnSend').disabled = 'disabled';
            document.getElementById('btnLogout').disabled = 'disabled';
            document.getElementById('btnLogin').disabled = '';
         }
         function window_onunload(){
            socket.emit('logout',userName);
            socket.disconnect();
         }
   body(onload='window_onload()', onunload='window_onunload()')
      h1 Socket.IO聊天室
      #divContainer1
         table.tbDlg(border='0', cellpadding='3', cellspacing='0', width='100%')
            tr.trDlg
               td.tdDlg(width='5')
                  | 用户名:&nbsp
                  input#tbxUsername(type='text',placeholder='请输入用户名', size='20')
                  input#btnLogin(type='button', value='login', onclick='btnLogin_onclick();')
                  input#btnLogout(type='button', value='logout', disabled='', onclick='btnLogout_onclick();')
      #divLeft
         #divChat
         #divContainter3
            table.tbDlg(border='0', cellpadding='3', cellspacing='0', width='100%')
               td.trdlg
               td.tdDlg(valign='top', nowrap='') 对话
               td.tdDlg(valign='top')
                  textarea#tbxMsg(cols='255', rows='5', style='width: 100%')
               td#tdDlg(valign='top')
                  input#btnSend(type='button', value='发送', disabled='', onclick='btnSend_onclick();')
      #divRight
         | 用户列表:

在项目的根目录下的app.js 中添加如下代码:

/**
 * Created by chen on 2015/11/10.
 */
var http = require('http');
var express = require('express');
var sio = require('socket.io');
var fs = require('fs');
var app = express();
var server = http.createServer(app);
/*app.get('/',function(req,res){
  res.sendFile(__dirname+'/index.jade');
});*/
server.listen(4444);
var io = sio.listen(server);
var names = [];
io.sockets.on('connection',function(socket){
  socket.on('login',function(name){
    for(var i = 0; i < names.length;i++){
      if(names[i] === name){
        socket.emit('duplicate');
        return;
      }
    }
    names.push(name);
    io.sockets.emit('login',name);
    io.sockets.emit('sendClients',names);
  });
  socket.on('chat',function(data){
    io.sockets.emit('chat',data);
  });
  socket.on('logout',function(name){
    for(var i = 0; i < names.length;i++){
      if(names[i] === name){
        names.splice(i,1);
        break;
      }
    }
    socket.broadcast.emit('logout',name);
    io.sockets.emit('sendClients',names);
  });
});

运行:
输入url:http://localhost:4444 即可以运行改程序了。。。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用express + socket.io实现多房间聊天应用

原文地址:http://www.jianshu.com/p/40d8bc17529f socket.io简介 Socket.IO是一个开源的WebSocket库,它通过Node.js实现W...

Node.js + express + socket 实现在线实时多人聊天室

项目目录结构: 前端部分: 登录页面Login部分: login.html login L...

利用socket.io实现多人聊天室(基于Nodejs)

socket.io简介在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的...

nodejs socket.io 聊天室

阅读目录 需求分析Node.jsSocket.IO安装Node.js搭建WebSocket服务端服务端代码实现客户端代码实现 Web领域的实时推送技术,也被称作Realtime技术。这种技术要...
  • xy2204
  • xy2204
  • 2015-11-30 16:49
  • 1218

nodejs多房间web聊天室

一年之前的做的小项目,过了许久,翻出当时的PPT文档总结一下。源码下载:https://github.com/CreekLou/chatRoom Nodejs背景简介 1 ,JavaScript最早...
  • LGCSSX
  • LGCSSX
  • 2014-08-23 00:09
  • 3607

Nodejs做聊天室

websocket作为一项HTML5自带的技术、我也是新手、摸索了好久、才成功写出一个聊天室软件、下面就一点点分享一下我的经验和挫折 首先分不开的便是nodejs的安装、其实websocke...

基于NodeJs的在线聊天室

基于NodeJs的在线聊天室一、技术选型: 前端需要的后端相关技能 NodeJs(express框架)、MongoDb(NoSql的使用学习) 前端需要的前后端通讯知识 实时通讯使用WebSock...

nodeJS socket 多个房间的聊天室

nodeJS socket 多个房间的聊天室 nodeJS socket聊天室。接触nodejs 发现nodejs的一些模块对于socket编程还是挺方便的。下面我讲讲解一下nodejs 如何构建...

基于Node.js,Express,Socket.io创建简单聊天室

基于Node.js,Express,Socket.io创建简单聊天室 首先看服务器端: //创建express服务器(注意:创建express服务器,需要http模块的支持) var expr...

phaChat聊天室(Node.js+express+mysql+socket)

一个基于 node.js 搭建的web聊天系统
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)