1像寒、先新建一個html網(wǎng)頁用于展示效果
<!DOCTYPE html>
<html>
<head>
<style>
/* #box{
width: 300px;
height: 300px;
border: 1px rgb(158, 158, 158) solid;
} */
</style>
</head>
<body>
<!-- 用于用戶輸入 -->
<input type="text" placeholder="請輸入" id="ipt">
<button id="btn">發(fā)送請求</button>
<!-- 聊天框 -->
<div id="box">
</div>
<script>
//html5自帶ws州既，這里直接創(chuàng)建ws對象，并輸入發(fā)送地址
var socket = new WebSocket('ws://localhost:3000')
//簡單的創(chuàng)建三個常量用于分別提示信息萝映，離開信息吴叶，普通消息
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//用于測試，是否連上服務器服務端
socket.addEventListener('open', function () {
document.getElementById("box").innerText = '服務建立成功'
})
//定義發(fā)送信息按鈕的點擊事件
document.getElementById('btn').addEventListener('click', function () {
//獲取輸入框中的信息
var value = document.getElementById('ipt').value
//調(diào)用ws對象發(fā)送信息
socket.send(value);
document.getElementById('ipt').value = ''
})
//ws對象的接收信息方法序臂，用于接收服務器發(fā)送給瀏覽器的信息
socket.addEventListener('message', function (e) {
var data = JSON.parse(e.data)
//新建div蚌卤，用于追加到box中
var dv = document.createElement('div')
//拼接一下服務器返回過來的數(shù)據(jù)，做一些簡單的格式處理
dv.innerText = data.msg + "--" + data.time
//判斷發(fā)送出來的信息的類型奥秆，用不同的顏色做區(qū)分
if (data.type===TYPE_ENTER){
dv.style.color='green'
}
if (data.type===TYPE_LEAVE){
dv.style.color='red'
}
//把新消息追加到聊天框中逊彭，提供給所有人查閱
document.getElementById("box").appendChild(dv)
})
</script>
</body>
</html>
2、使用nodejs搭建一個簡單的websocket服務
一构订、 可以在第一步的index.html同級目錄下侮叮，創(chuàng)建一個新的文件夾 ，如websocket,然后在websocket文件夾中創(chuàng)建一個app.js文件悼瘾。如下圖：
c1bc7b17acd2c40641f9816ed7ec5e56_413fdf33756a460285f0bdecbfa6e296.png
二囊榜、在app.js中編寫一個簡單的本地websocket服務先使用 npm install nodejs-websocket 安裝依賴
const WebSocket = require('nodejs-websocket')//引入剛剛npm下載的依賴
const PORT=3000 //設置監(jiān)聽的端口
//簡單的定義一下不同的消息常量
const TYPE_ENTER=0
const TYPE_LEAVE=1
const TYPE_MSG=2
//記錄聊天組人數(shù)
var count=0
//創(chuàng)建wb服務
const wss = WebSocket.createServer(connect=>{
//當有人連接成功，人數(shù)+1
count++
//設置新來的用戶的亥宿，用戶名稱
connect.userName=`用戶${count}`
//自己在封裝的卸勺，集體廣播/發(fā)送信息的方法
//有人連接上了我們的聊天組，自動發(fā)消息告訴當前聊天組所有人
//發(fā)送一個對象烫扼，里面封裝了消息類型曙求，具體信息，當前時間
broadcast({
type:TYPE_ENTER,
msg:`${connect.userName}進入了聊天室`,
time:new Date().toLocaleTimeString()
})
//ws自己的方法，當接收到用戶信息時觸發(fā)
//這里直接調(diào)用集體廣播方法悟狱，發(fā)送給所有人
connect.on("text",data=>{
broadcast({
type:TYPE_MSG,
msg:data,
time:new Date().toLocaleTimeString()
})
})
//ws自己的方法静浴，當有 用戶離開當前聊天組時觸發(fā)
connect.on("close",data=>{
//有人離開，當前人數(shù)減一
count--
//發(fā)送消息的邏輯與上面同理
broadcast({
type:TYPE_LEAVE,
msg:`${connect.userName}離開了聊天室`,
time:new Date().toLocaleTimeString()
})
})
//ws自己的方法挤渐，簡單的處理一下異常
connect.on("error",data=>{
console.log('發(fā)生異常');
})
})
//自己封裝的全體廣播方法苹享，
function broadcast(msg){
//使用ws中的connections方法獲取到當前聊天組的所有用戶信息
//循環(huán)發(fā)送信息給不同的用戶
wss.connections.forEach(item=>{
console.log("msg",msg);
//這里轉(zhuǎn)json因為原生的websocket不支持發(fā)送json，所以轉(zhuǎn)一下字符串
item.send(JSON.stringify(msg))
})
}
//監(jiān)聽端口
wss.listen(PORT,()=>{
console.log("服務啟動成功");
})
然后使用 node ./app.js啟動即可
