关闭

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

标签: expresssocketnode.js
814人阅读 评论(0) 收藏 举报
分类:

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 即可以运行改程序了。。。

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:96562次
    • 积分:1836
    • 等级:
    • 排名:千里之外
    • 原创:90篇
    • 转载:18篇
    • 译文:0篇
    • 评论:7条
    最新评论
    百度统计