一个node+express+socket.io开发的聊天室源码

首先是下载包:

npm install express

npm install socket.io

建立文件:

 

开发的聊天室源码-express socket聊天室">

 

服务器端代码:server.js

 

 代码如下 复制代码

var http=require("http");
var express=require("express");
var sio=require("socket.io");

var app=express();
app.use(express.static(__dirname+"/"));

var server=http.createServer(app);
app.get("/", function (req, res) {
    res.sendFile(__dirname+"/chart.html");
});
server.listen(1337,"127.0.0.1", function () {
   console.log("开始监听");
});
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);
    });
});

 

静态页面 chart.html:

 

 代码如下 复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Socket.IO聊天室</title>
    <link rel="stylesheet" href="chart.css" />
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="chart.js"></script>
</head>
<body onload="window_onload()">
<h1>Socket.IO聊天室</h1>
<div id="divContainer1">
    <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
        <tr class="trDlg">
            <td class="tdDlg" width="5">
                用户名:&nbsp;
                <input id="tbxUsername" type="text" value="游客" size="20" />
                <input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" />
                <input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" />
            </td>
        </tr>
    </table>
</div>
<div id="divLeft">
    <div id="divchat"></div>
    <div id="divContainer3">
        <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
            <tr class="trDlg">
                <td valign="top" class="tdDlg" nowrap>对话</td>
                <td valign="top" class="tdDlg">
                    <textarea id="tbxMsg" cols="255" rows="5" style="width: 100%"></textarea>
                </td>
                <td valign="top" class="tdDlg">
                    <input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" />
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="divRight">用户列表:</div>
</body>
</html>

 

静态css文件:

 

 代码如下 复制代码
h1{
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 14pt;
    color: #006bb5;
    background-color: #f0f0f0;
    border-radius: 5px;
    border: 1px solid #f0f0f0;
    padding: 5px;
    margin: 0 0 18px 0;
}
div[id^=divContainer]{
    border: 0;
    margin: 10px 0;
    padding: 3px;
    background-color:#f0f0f0;
    border-radius: 5px;
}
div#divLeft{
    width: 85%;
    background-color:#f0f0f0;
    float: left;
}
div#divRight{
    width: 15%;
    background-color:white;
    float: right;
    font-weight: bold;
    font-size: 12px;
}
div#divchat{
    border: 0;
    margin: 10px 0;
    padding: 3px;
    background-color:#f0f0f0;
    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;
     border-radius: 10px;
     margin: 1px;
     color: white;
     background-color:#81a0b5;
     width: 100px;
 }
input[type="button"]:hover{
    margin: 1px;
    background-color: #006bb5;
}
input[type="button"]:active{
    margin: 1px;
    font-weight: bold;
    background-color:#006bb5;
}
input[type="button"]:focus{
    margin: 0;
    font-weight: bold;
    background-color:#006bb5;
}

 

静态js文件

 

 代码如下 复制代码

var userName,//用户登录到socket.io聊天室中时所使用的用户名
    socket,//与聊天服务器连接的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").diabled=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="";
}

 

最终界面

 

可以多开几个浏览器进行测试.这样效果更佳.

时间: 2024-10-23 13:54:47

一个node+express+socket.io开发的聊天室源码的相关文章

servlet-求一个C#+SQL Servlet 做的QQ聊天软件源码,代码越少越好

问题描述 求一个C#+SQL Servlet 做的QQ聊天软件源码,代码越少越好 求一个C#+SQL Servlet 做的QQ聊天软件源码,代码越少越好, 解决方案 做不到,你去找腾讯公司管他们要源码吧 解决方案二: QQ中强制和他人聊天的代码

Node.js+Socket.IO实现的WebSocket群聊天室源码

首先上图上实例 聊天室地址:http://chat.52itstyle.com WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询 (Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些 方案带来很明显的缺点,需要由浏览器对服务器发出HTTP request,大量消耗服务器带宽和资源.面对这种状况,HTM

asp.net利用socket实现简单多对多聊天室源码

因为在传输的时候服务器与客户端只以字节流的方式来完成数据的传输,那么我们就可以在不同的数据数里加一个标志.                   图为httpwatch捕获的http报文   这种思想来源自HTTP请求与响应报文,模拟HTTP请求与响应,我自己规定字节流里第一个字节{0:文字,1:文件,2:震动}.   但是这个时候有一个坏处,如果标识后期又要加一个功能,比如要求用户可能控制不同的文字大小,不同的文字与颜色.那样标志就越来越多了,传输的报文也越来越难封装和解析了(中间多了定义标识,

200分求:一个简单的聊天室源码(VS2005/C#),最好没有页面刷新的

问题描述 谢谢! 解决方案 解决方案二:http://search.download.csdn.net/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E3%80%80c%23

Unity3D实现基于Socket通讯的公共聊天室

多个客户端一同使用就是一个简单的公共聊天室.服务端为一个控制台程序使用C#实现,当然,在Unity3D中也相应地使用了C#语言实现客户端,服务端和客户端能实现消息的互通,当服务端接收到某客户端发送过来的消息时将会对客户端列表成员进行广播,这是公共聊天室的最基本的形式.Socket通讯是网络游戏最为基础的知识,因此这个实例能向有志投身于网游行业的初学者提供指导意义. using System; using System.Collections.Generic; using System.Linq;

基于Socket.IO实现Android聊天功能代码示例

一.简述 Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket的协议用于实时通信.跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js. 该种官方介绍看起来有点懵逼,简而言之就是:客户端可通过Socket.IO与服务器建立实时通信管道 二.应用 该下就是介绍Socket.IO通信管道的铺设.通信以及销毁工作. 2.1 引入Socket.io包 compile 'io.socket:socket.io-client:0.8.

c#网络编程-求c# socket聊天程序源码

问题描述 求c# socket聊天程序源码 我用c# winform自己写了一个局域网通信的软件,但是有点问题.求源码,类似QQ那样的,但我只要能实现在局域网聊天就行!! 解决方案 http://www.newxing.com/Code/CSharp/SOCKET_62.html 解决方案二: http://blog.csdn.net/liuwenqiangcs/article/details/7485950http://www.cnblogs.com/guoyiqi/archive/2011/

基于spring+hibernate+JQuery开发之电子相册(附源码下载)_java

项目结构: 开发之电子相册(附源码下载)_java-spring hibernate源码"> 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop dat

语音通信-有人能提供一个imsdroid能正常运行并能接电话的源码么?

问题描述 有人能提供一个imsdroid能正常运行并能接电话的源码么? 本人正在做一个基于imsdroid的语音通话的项目.可是集成了代码之后,发现不能接听电话.希望有人能提供一份imsdroid的源码,万分感谢. 我每次拨打电话之后,接听电话的时候会报错提示是没有找到匹配的解码器.可是我发现我的在选项中选的解码器应该是没有问题的 ,我不知道是不是我的代码有问题. 如果有人做过imsdroid相关的项目,能正常接听电话.希望能提供一份简单的demo就可以了. 再次万分感谢.