webSocket
後端
監聽服務器: new WebSocket.server({port:30001}, () => {}) , ws.on('connection', (client)=>{})
接收信息: client.on('message', ()=>{})
發送信息: client.send()
監聽斷開連接 client.on('close)
const webSocket = require('ws');
const ws = new webSocket.Server({port:3000}, ()=> {
console.log('socket start');
})
// 廣播:有用戶發送廣播字樣,全體線上用戶都會收到相應信息
let clients = [];
ws.on('connection', (client) => {
clients.push(client);
console.log(client);
client.send('連接成功,後端接收到了前端的數據');
client.on('message', (msg)=> {
console.log('前端的數據:' + msg);
// client.send('後端接收到了前端的數據' + msg);
if(msg.indexOf('廣播') != -1) {
sendAll()
}
})
client.on('close', () => {
console.log('前端主動關閉連接');
})
})
function sendAll() {
for(let i = 0; i < clients.length; i++) {
clients[i].send('廣播廣播廣播廣播廣播廣播廣播廣播廣播廣播');
}
}
前端
連接服務器: ws.onopen()
接收信息: ws.onmessage = ()=>{}
發送信息: ws.send()
斷開連接: ws.onclose()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="text">
<button οnclick="sendServer()">send server</button>
<script>
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
console.log('服務器已連接');
}
ws.onmessage = (msg, ) => {
// console.log(msg);
console.log('來自服務器的數據:' + msg.data);
}
ws.onclose = () => {
console.log('斷開服務器連接');
}
function sendServer() {
var value = document.getElementById('text').value;
console.log(4554);
ws.send(value);
}
</script>
</body>
</html>