架构:
- Nodejs运行server.js
- 浏览器直接运行client.html
服务端
websocket事件
- on(‘text’)事件 (收到客户端文本消息触发)
- on(‘close’)事件 (客户端断开触发)
- on(‘error’)时间 (连接错误信息触发)
websocket方法
send()
服务端代码
var ws=require('nodejs-websocket')
var server=ws.createServer(function (conn){
console.log("new connection");
//定义conn的text事件
conn.on('text',function (str){
console.log(str);
// broadcast(str);
var data=JSON.parse(str);
switch (data.type){
case 'user_name':
conn.nickname=data.name;
broadcast(data.name + ': 加入了房间');
break;
case 'chat_msg':
broadcast(conn.nickname + ': ' + data.text);
break;
default:
break;
}
})
//定义conn的错误事件
conn.on('error',function (e){
console.log('one client close');
})
//定义conn的断开连接事件
conn.on('close',function (){
broadcast(conn.nickname +'离开了房间');
})
// setTimeout(function (){
// conn.sendText('i am server');
// },500);
}).listen(8088);
//广播函数
function broadcast(str){
server.connections.forEach(function (conn){
conn.send(str);
})
}
客户端
websocket事件
- onopen事件 (连接上了服务器触发)
- onmessage时间 (收到服务器信息触发)
websocket方法
send()
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt_name">
<button id="btn_setname">设置</button>
<input type="text" id="txt_msg_to_send">
<button id="btn_send_msg" type="button">发送</button>
<div id="container">
</div>
</body>
</html>
<script>
var ws=null;
//初始化连接
document.getElementById('btn_setname').onclick=function (){
//只能连接一次
document.getElementById('btn_setname').setAttribute('disabled',true);
document.title="用户"+document.getElementById('txt_name').value;
// 取名字
var name=document.getElementById('txt_name').value;
if(name == null){
return alert('名字不能为空!')
}
//连接
ws=new WebSocket('ws://localhost:8088');
//发送名字
ws.onopen = function (){
ws.send(JSON.stringify({
name:name,
type:'user_name'
}));
}
//发送聊天内容
document.getElementById('btn_send_msg').onclick=function (){
var tmp=document.getElementById('txt_msg_to_send').value;
ws.send(JSON.stringify({
text:tmp,
type:"chat_msg"
}));
//清空
document.getElementById('txt_msg_to_send').value='';
}
//接受服务消息
ws.onmessage = function (e){
var p = document.createElement('p');
p.innerHTML=e.data;
var container=document.getElementById('container')
container.appendChild(p);
}
}
</script>
效果
群聊
|