websocket，小demo；記錄；便於以後查看：服務端nodejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://localhost:3000/socket.io/socket.io.js" charset="utf-8"></script>
</head>
<body>
<p style="color: red;display: none" id="p">服務器已經斷開連。。。。</p>
<div id="div1" style="width: 400px;height: 500px;border: 1px solid black;"></div><br>
<textarea name="text" id="tex" cols="20" rows="2"></textarea>
<input id="btn" type="button" value="發送">
</body>
<script>
window.onload = function () {
let sock = io.connect('ws://localhost:3000/');
let text = document.getElementById('tex');
let btn = document.getElementById('btn');
let div1 = document.getElementById('div1');
let pp = document.getElementById('p');
sock.on('connect', () => { // 已經連接服務器時觸發
pp.style.display = 'none'; // 關閉顯示
btn.disabled = ''; // 按鈕可用
btn.style.backgroundColor = '';
})
sock.on('disconnect', () => { // 斷開服務器連接時觸發
pp.style.display = 'block'; // 顯示提示
btn.disabled = 'true'; // 禁用按鈕
btn.style.backgroundColor = '#ccc';
})
btn.onclick = function () {
sock.emit('msg', text.value); // 發送
// 自己發送的，給個標記
let p1 = document.createElement('p');
p1.innerHTML = text.value;
p1.style.color = 'green';
div1.appendChild(p1);
// 發送結束清空內容
text.value = '';
}
sock.on('msg', str => { // 接收
let p1 = document.createElement('p');
p1.innerHTML = str;
p1.style.color = 'red';
div1.appendChild(p1);
})
}
</script>
</html>
const http = require('http');
const io = require('socket.io');
let httpServer = http.createServer((req,res)=>{
});
httpServer.listen(3000);
let wsServer = io.listen(httpServer);
let lists = [];
wsServer.on('connection',sock=>{
lists.push(sock);
// 斷開連接
sock.on('disconnect',()=>{ // 把斷開連接的剔除
let n = lists.indexOf(sock);
if(n !=-1) {
lists.splice(n,1);
}
});
sock.on('msg',str => {
lists.forEach(item => {
if(item != sock) {
item.emit('msg',str);
}
})
});
});
