前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button onclick="ksend()">發送請求</button>
<div></div>
</body>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
var socket = new WebSocket('ws://localhost:3000')
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
socket.addEventListener('open',function(){
div.innerHTML = "連接成功了<br>"
})
function ksend(){
var value = input.value
socket.send(value)
input.value = ""
}
socket.addEventListener('message',function(e){
var data = JSON.parse(e.data)
console.log(data.type);
var dv = document.createElement('div')
dv.innerHTML += data.msg + '-----' + data.time
if(data.type===TYPE_ENTER){
dv.style.color = 'green'
}else if(data.type===TYPE_LEAVE){
dv.style.color = 'red'
}
div.appendChild(dv)
})
</script>
</html>
後端node代碼
需要先安裝nodejs-websocket模塊
const ws = require('nodejs-websocket')
const PORT = 3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
let count = 0
const serve = ws.createServer(connect =>{
console.log("新的用戶連接上來了");
count++
connect.name = `用戶${count}`
broadcast({
type:TYPE_ENTER,
msg:`${connect.name}進入了聊天室`,
time:new Date().toLocaleTimeString()
})
connect.on('text',data=>{
broadcast({
type:TYPE_MSG,
msg:data ,
time:new Date().toLocaleTimeString()
})
})
connect.on('close',()=>{
console.log('連接斷開了');
count--
broadcast({
type:TYPE_LEAVE,
msg:`${connect.name}離開了聊天室`,
time:new Date().toLocaleTimeString()
})
})
connect.on('error',()=>{
console.log("用戶連接異常");
})
})
function broadcast(msg){
serve.connections.forEach(item=>{
item.send(JSON.stringify(msg))
})
}
serve.listen(PORT,()=>{
console.log("websocket啓動成功，端口號"+PORT);
})
最終效果圖
