//app.js
var ws = require('nodejs-websocket');
var server = ws.createServer(function(conn){
console.log('connected');
conn.on('text',function(str){
console.log(str);
//conn.sendText(str);//將接收道德str用sendText方法傳給接收到的一個連接
//boardcast(str);//調(diào)用廣播方法將節(jié)后到的傳給所有的瀏覽器
var data = JSON.parse(str);
switch (data.type){
case 'chat':
//boardcast(conn.nickname + '說:' + data.text);
boardcast(JSON.stringify({name:conn.nickname,text:conn.nickname + '說:' + data.text}));
break;
case 'setname':
conn.nickname = data.name;
//boardcast(data.name+'加入了房間');
boardcast(JSON.stringify({text:data.name+'加入了房間',name:conn.nickname}));
break;
}
});
// setTimeout(function(){
// conn.sendText('來自服務(wù)端的消息!');
// },3000);
conn.on('close',function(){
boardcast(JSON.stringify({name:conn.nickname,text:conn.nickname+'退出了房間'}));
});
conn.on('error',function(err){
console.log(err);
});
}).listen(2333);
/**
* 這個connections是一個數(shù)組包含我們所有的連接
*/
//我們來寫一個廣播吧
function boardcast(str){
server.connections.forEach((conn) => {
conn.sendText(str);
});
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>測試一下websocket</title>
</head>
<body>
<input id='name' type='text'>
<button id='setname' type='button'>設(shè)置</button>
<input id='text' type='text'>
<button id='btn' type='submit'>發(fā)送</button>
<div id="root"></div>
<script>
var ws = null;
document.getElementById('setname').onclick = function() {
var name = document.getElementById('name').value;
if(name === null){
alert('注意用戶名不能為空');
}
console.log(name);
ws =new WebSocket('ws://localhost:2333');
ws.onopen = function (){
ws.send(JSON.stringify({name:name,type:'setname'}));
document.getElementById('btn').onclick = () => {
//console.log(document.getElementById('text').value);
ws.send(JSON.stringify({text:document.getElementById('text').value,type:'chat'}));
}
}
ws.onmessage = function (e){
//console.log(e.data);
//document.body.innerHTML += '<p>'+e.data + '</p>';
// var p =document.createElement('p');
// p.innerHTML = e.data;
document.getElementById('root').appendChild(createChatPanel(JSON.parse(e.data)));
}
document.getElementById('setname').style.display = 'none';
}
function createChatPanel(data){
var name = data.name;
var text = data.text;
var div = document.createElement('div');
var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.innerHTML = name + ":" + (new Date()).toString();
p2.innerHTML = text;
p1.style.color = 'green';
div.appendChild(p1);
div.appendChild(p2);
return div;
}
</script>
</body>
</html>
