HTML+CSS+JS+node.js实现websocket聊天室

本文实现如题所说,使用的websocket库是nodejs-websocket库,可在网上直接下载安装:npm install nodejs-websocket     使用是直接在文件中require即可

一开始想用PHP写后台实现服务器端websocket,但是PHP没有实现,所以又选择了node.js,这是第一个简单版本,具体代码如下,代码中有注释,后期会添加一些文字形式的注释和实现过程中遇到的问题

HTML网页:

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <link rel='stylesheet' href='http://10.138.244.142/websocket/client.css'>
    </head>
    <body>
        <div class='userLogin'>
            <p id='userLoginHint'>请输入用户名:</p>
            <input type='text' id='userName'>
            <button id='userNameButtonEnter'>注册</button>
        </div>
        <hr>
        <div id='historyMessage'>
        </div>

        <textarea id='inputText'></textarea>
        <button id='send' disabled='true'>发送</button>

        <div id='systemStatus'>
            <p id='connectStatue'>正在连接...</p>
           <!-- <p id='numberOnline'>当前在线人数:3</p>
            <p id='yourselfName'>用户名:</p-->
        </div>
        <p id='receMessage'></p>
        <script src='http://10.138.244.142/websocket/client.js'></script>
    </body>
</html>
CSS代码:
.userLogin{
    text-align: center;
}
#userLoginHint{
    display: inline;
}
#historyMessage{
    height:400px;
    background-color: #DBD8D8;
    overflow: auto;
    padding: 2px;
}

#inputText{
    width:85%;
    height:90px;
}

#systemStatus{
    text-align: center;
}

#systemStatus>p{  
    display: inline-block;
    padding-right: 150px;
}
效果如下:
前台代码js脚本:
//---------------读HTML页面中的句柄------------------------------------------//
var loginButton=document.getElementById('userNameButtonEnter');
var userName=document.getElementById('userName');
var inputText=document.getElementById('inputText');//读输入框的句柄
var dispStatus=document.getElementById('dispStatus');//读按钮的句柄
var receMessage=document.getElementById('receMessage');//读显示的句柄
var loginButton=document.getElementById('userNameButtonEnter');//读注册按钮
var userName=document.getElementById('userName');//读输入框
var divhistoryMessage=document.getElementById('historyMessage');//历史消息框
var connectStatue=document.getElementById('connectStatue');
//var numberOnline=document.getElementById('numberOnline');
//var yourselfName=document.getElementById('yourselfName')
var sendButton=document.getElementById('send');
//------------------------------------------------------------------------//

//============定义变量================//
//var user=userName.value;
var userNameArray=new Array();//用于存放用户名
var x;//遍历是否存在重复用户名时的循环变量
var ws=new WebSocket('ws://10.138.244.142:8000');//创建websocket连接,,服务端的IP+端口号
//========================================//

/***********注册事件********************************** */
//注册按钮点击事件,若输入框(用户名)内容为空,则提示重新输入,若内容不为空,点击注册按钮之后按钮和输入框禁用,一次来表示一个用户只能注册一次
login:
loginButton.addEventListener('click',function(){
    if(userName.value==''){
        alert('用户名不能为空,请重新输入');
    }
    else{
         if(userNameArray.length==0){             //先判断用户名是否为空,若为空报错,重新输入
             userNameArray.push(userName.value);         //不为空继续执行,判断用户数组是否为空,若为空,直接把用户名压入
         }                                     //若用户数组中有用户,则进行遍历扫描,查看当前注册用户与之前的用户是否右有重复
         else{                                 //若有重复,报错并清空输入
            for(x in userNameArray){          //若遍历之后没有重复,退出for循环,将此用户名压入用户名数组最后一个
                if(userName.value==userNameArray[x]){
                    alert('重复注册');
                    userName.value='';
                    //break login;//如果遇到重复的就直接跳出,跳到用户注册开始的地方,等待下一次注册
                }
            }
            userNameArray.push(userName.value);
        }
        
        ws.send('userID:'+userNameArray[userNameArray.length-1]);//向服务器发送最后一个注册的用户
        loginButton.disabled=true;//注册按钮禁止使用
        userName.disabled=true;//用户名禁止输入
        sendButton.disabled=false;//使能发送按钮
        connectStatue.innerHTML='连接成功<br>';
    }
})
/**************************************************** */

//!!!!!!!!!!!!函数!!!!!!!!!!!!!!!!!!!!!!!!!!!//
alert('先注册用户名');

ws.onopen=function(e){//开始创建连接时的事件,显示连接成功
    
}

sendButton.οnclick=function(e){//按钮按下触发事件,
    ws.send(inputText.value,true);//按下按钮向服务端发送输入框中的值
    inputText.value='';
}

ws.onmessage=function(e){//读取服务端接收到的信息
    var time=new Date();
    var receiveString=e.data;//将接收到的数据变成字符串保存到变量中
    var index_userID=receiveString.indexOf('userID');
    var receUserName=receiveString.slice(0,index_userID);
    divhistoryMessage.innerHTML += receUserName+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()+'>>>'+receiveString.slice(index_userID+6)+'<br>';//将信息显示出来
    //yourselfName.innerHTML +=receiveString+'.....'+receUserName;
    divhistoryMessage.scrollTop=divhistoryMessage.scrollHeight;
}


后台node.js代码:
var ws=require("nodejs-websocket");//引入websocket模块
var msg=null;
var x=0;//遍历用户名数组的循环变量
var username='';//用来存放解析出来的用户名
var userNameObject={};//创建一个存储用户名的数组,key:userID  value:connect(每个连接的connect是不同的,但是我不会解析)
console.log("开始建立连接...");//后台打印状态信息
var server=ws.createServer(function(connect){//创建一个新连接
    connect.on("text",function(msg){//接收触发事件
        console.log("收到的消息是:"+msg);//接收到新消息之后在后台打印出来
        if(msg){//如果消息不是空,将接收到的消息发送给客户端
            if(msg.slice(0,7)=='userID:'){//解析收到的数据,若前几个为userID,则说明收到的是用户名,然后创建用户名数组
                username=msg.slice(7);
                userNameObject[username]=connect;//将连接信息赋给数组对象,键:解析出来的用户名,值就是连接
                server.connections.forEach(function (conn) {//广播
                    conn.sendText('System'+'userID'+'欢迎'+username+'加入');
                })
            }
            else{
                for(x in userNameObject){
                    if(connect==userNameObject[x]){//如果找到了对应的连接,那x键就是我们要用的userID
                        server.connections.forEach(function (conn) {//广播
                            conn.sendText(x+'userID'+msg);
                        })
                    }
                }
            }
        }
    });

}).listen(8000)

使用时需要改HTML中的CSS文件和前台脚本文件路径,还要改前台js脚本文件中的IP地址(改成本机地址就行了)


相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页