socket服務器 先後端鏈接

 

客戶端

 

html結構

<input type="text">
<button onclick="sendServer()">send</button>

js代碼

const ws = new WebSocket('ws://localhost:8080/')// 參數是要鏈接的服務器地址 // 已經鏈接
ws.onopen = () => { // ws.send('你們好')
} // 前端接受服務器消息
ws.onmessage = (msg) => { console.log(msg) //歡迎光臨 // const content = document.getElementById('content') // content.innerHTML += msg.data + '<br/>'
} // 錯誤的時候觸發
ws.onerror = (err) => { console.log(err); } // 服務器斷開鏈接的時候觸發
ws.onclose = () => { console.log('closed~'); } //前端向後端發消息
function sendServer(){ let text=document.getElementsByTagName('input')[0].value ws.send(text) }

後端服務器

const WebSocket = require('ws') const ws = new WebSocket.Server({ port: 8080 },()=>{ console.log('socket 服務器開啓') }) // 開啓一個socket 服務器
ws.on('connection', (client) => { // client 是鏈接上的客戶端對象
console.log('客戶端鏈接') client.send('歡迎光臨') //後端向前端發送消息 // client.name = ++ clientName // clients[client.name] = client //接受客戶端發送的消息
client.on('message', (msg) => { console.log(msg) // broadcast(client, msg)
}) // client.on('close', () => { // delete clients[client.name] // console.log(client.name + ' 離開了~') // })
}) // function broadcast(client, msg) { // for (var key in clients) { // clients[key].send(client.name + ' 說：' + msg) // } // }
註釋代碼爲根據須要而用