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

以你之姓@ 2022-08-10 09:23 158阅读 0赞

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

说一下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+' ';
 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+' ';
 });
 divRight.innerHTML = '用户列表 ';
 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+' ';
 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+' ';
 });
 divRight.innerHTML = '用户列表 ';
 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][http_localhost_4444] 即可以运行改程序了。。。

[http_localhost_4444]: http://localhost:4444