與Ajax不同，WebSocket可以使服務端主動向客戶發送響應，本案例就是基于WebSocket的一個在線聊天室，不過功能比較簡單，只能滿足文字交流。演示如下。
案例學習于b站up主，鏈接?。這位up主講的非常清楚，值得去學習。本文屬于記錄自我學習過程的文章。
項目目錄下app.js
//導入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000//創建一個server
const server = ws.createServer(connect => {console.log('有用戶連接上來了')
})server.listen(PORT,() => {console.log('websocket服務啟動成功了，監聽了端口'+PORT)
})項目目錄下打開終端?
npm install nodejs-websocket
?下載成功后。
?項目目錄下index.html
?
去掉css。?
app.js?
//導入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000//連接的數量
let count = 0
//創建一個server
const server = ws.createServer(connect => {console.log('新的連接')count++connect.userName = `用戶${count}`broadcast(`${connect.userName}進入了聊天室`)//接收connect.on('text',data => {broadcast(data)})//關閉connect.on('close',data => {console.log('關閉連接')count--broadcast(`${connect.userName}離開了聊天室`)})//異常connect.on('error',data => {console.log('發生異常')})
})//廣播
function broadcast(msg) {server.connections.forEach(item => {item.send(msg)})
}server.listen(PORT,() => {console.log('websocket服務啟動成功了，監聽了端口'+PORT)
})?index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><div></div><input type="text" placeholder="請輸入你的內容"/><button>發送</button><script>var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('div')//websocket的服務地址var socket = new WebSocket('ws://localhost:3000')//連接成功時socket.addEventListener('open',function() {div.innerHTML = '連接服務成功了'})//主動向服務器發消息button.addEventListener('click',function() {var value = input.valuesocket.send(value)})//接受數據socket.addEventListener('message',function(e) {console.log(e.data)var dv = document.createElement('div')dv.innerText = e.datadiv.appendChild(dv)})//斷開連接socket.addEventListener('close',function(e) {div.innerHTML = '服務斷開連接'})</script></body>
</html>瀏覽框1
?
?瀏覽框2
?
稍微美化頁面，增強一下邏輯。在瀏覽器內打開三個窗口，既有3個人參與到聊天室中，現在可以聊天了。
?用戶1
用戶2?
?用戶3
?主要代碼
請先安裝node.js并已下載websocket的環境。
項目目錄：
app.js
//導入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2//連接的數量
let count = 0
//創建一個server
const server = ws.createServer(connect => {console.log('新的連接')count++connect.userName = `用戶${count}`broadcast({type: TYPE_ENTER,msg: `${connect.userName}進入了聊天室`,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})//接收connect.on('text',data => {broadcast({type: TYPE_MSG,msg: connect.userName + ':' + data,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})})//關閉connect.on('close',data => {console.log('關閉連接')count--broadcast({type: TYPE_LEAVE,msg: `${connect.userName}離開了聊天室`,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})})//異常connect.on('error',data => {console.log('發生異常')})
})//廣播
function broadcast(msg) {server.connections.forEach(item => {item.send(JSON.stringify(msg))})
}server.listen(PORT,() => {console.log('websocket服務啟動成功了，監聽了端口'+PORT)
})?index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {padding: 0;margin: 0;}body {background: #eff0fe;font-family: '宋體';}#box {padding: 20px;}input {width: 600px;height: 30px;border: none;outline: none;color: gray;}#chat {padding: 10px;background: white;width: 920px;box-sizing: border-box;height: 95vh;}#operation {position: fixed;top: 300px;right: 20px;}#title {font-size: 200px;position: fixed;top: 20px;right: 80px;color: gray;opacity: 0.3;font-family: '黑體';}button {height: 30px;width: 50px;text-align: center;line-height: 30px;border: none;color: gray;}button:hover {cursor: pointer;}.middle {width: 200px;margin: 0 auto;font-size: 3px;color: gray;margin-bottom: 5px;}.msg {width: 900px;word-break: break-all;}</style></head><body><div id="box"><div id="chat"></div><div id="title">聊天室</div><div id="operation"><input type="text" placeholder="請輸入你的內容"/><button>發送</button></div></div><script>const TYPE_ENTER = 0const TYPE_LEAVE = 1const TYPE_MSG = 2var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('#chat')console.log(input)//websocket的服務地址var socket = new WebSocket('ws://localhost:3000')//連接成功時socket.addEventListener('open',function() {div.innerHTML = '歡迎來到聊天室'})//主動向服務器發消息button.addEventListener('click',function() {var value = input.valuesocket.send(value)input.value = ''})//接受數據socket.addEventListener('message',function(e) {console.log(e.data)var data = JSON.parse(e.data)if(data.type === TYPE_MSG) {var dv = document.createElement('div')var time = document.createElement('div')var msg = document.createElement('div')time.className = 'middle'msg.className = 'msg'time.innerText = data.timemsg.innerText = data.msgdv.appendChild(time)dv.appendChild(msg)} else {var dv = document.createElement('div')var msg = document.createElement('div')var time = document.createElement('div')msg.className = 'middle'time.className = 'middle'msg.innerText = data.msgtime.innerText = data.timedv.appendChild(time)dv.appendChild(msg)}div.appendChild(dv)})//斷開連接socket.addEventListener('close',function(e) {div.innerHTML = '服務斷開連接'})</script></body>
</html>
)
