您的位置：首页 > Web前端 > Node.js

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

2017-10-11 19:05 1156 查看
本文实现如题所说，使用的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.onclick=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地址（改成本机地址就行了）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  即时通讯 websocket nodejs javascript
相关文章推荐
新的分享
章节导航