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

最新推荐文章于 2024-07-11 14:54:21 发布

申小远

最新推荐文章于 2024-07-11 14:54:21 发布

阅读量2.1k

点赞数 2

分类专栏： nodejs 即时通讯(聊天室) 文章标签：即时通讯 websocket nodejs javascript

本文链接：https://blog.csdn.net/u013749068/article/details/78207099

版权

nodejs 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

即时通讯(聊天室)

1 篇文章 0 订阅

订阅专栏

本文实现如题所说，使用的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地址（改成本机地址就行了）