1.點對點發送的原理
點對點發送的原理就是在用戶端連接配接伺服器的時候帶上使用者名，然後綁定到用戶端對象ws上，然後通過周遊連接配接伺服器的所有用戶端wss.clients，就可以通過之前綁定的使用者名對不同的使用者進行區分。
2.建立伺服器端
需要安裝ws子產品
npm i ws
// 導入ws子產品
const WebSocket=require('ws');
let wss=new WebSocket.Server({
port:8080
});
// 使用者連接配接時觸發
wss.on('connection',function(ws,request){
// 接收資料時觸發
ws.on('message',function(message){
// 預設接收的message是一個字元串 需用用JSON.parse()轉成對象
let info=JSON.parse(message);
// 如果是登入請求 為用戶端對象ws添加一個user屬性info中的user屬性
if(info.type==='login'){
ws['user']=info.user;
}else if(info.type==='message'){
// 如果是資訊請求 則周遊wss.clients這個用戶端set對象
// 注意 這個對象是set類型 是以需要使用forEach進行周遊
wss.clients.forEach(element => {
// 如果周遊到的用戶端的user和info中的to相同 則發送資訊給該用戶端
if(element['user']===info.to){
element.send(info.message)
}
});
}
})
})
3.建立用戶端
用戶端至少要建立3個 才能看出效果 用戶端代碼基本一樣 需要修改的部分會标明
<!DOCTYPE html>
<head>
<!-- 使用者名 可以改成任意的 -->
<title>使用者A</title>
<meta charset="utf8">
</head>
<body>
<label>需要發送的資訊:<input type="text" id="message"></label>
<label>接收者:<input type="text" id="receiver"></label>
<button id="sendMessage">發送資訊</button>
<button id="login">登入</button>
<script>
// 連接配接伺服器
let ws=new WebSocket('ws://127.0.0.1:8080');
let sendMessage=document.getElementById('sendMessage');
let login=document.getElementById('login');
let message=document.getElementById('message');
let receiver=document.getElementById('receiver');
// 當伺服器打開之後 預設直接進行登入
ws.onopen=function(){
ws.send(JSON.stringify({
type:"login", // type：login表示登入 用于後端邏輯判斷
// user:隻要確定每一個html頁面中的不一樣就可以了
user:"A" // user：使用者名 用于區分使用者并且作為别的使用者發送資訊時候的接收者
}))
}
// 接收資訊 當伺服器傳回資訊時列印資訊内容
ws.onmessage=function(message){
console.log(message.data);
}
// 發生資訊 按鈕點選時 發送資訊
sendMessage.onclick=function(){
ws.send(JSON.stringify({
type:"message", // type:message 表示發送資訊 後端邏輯判斷用
to:receiver.value, // 需要發送給誰
message:message.value, // 需要發送的内容
}))
}
</script>
</body>
4. 操作流程
4.1 先把步驟1中的伺服器運作起來，然後打開html頁面，注意，如果html頁面早就打開了 需要重新整理，因為html中檔案一打開 就會連接配接伺服器，如果伺服器是後來開的 則之前的連接配接就無效了。
4.2 頁面在打開時預設就完成了登入，根據頁面的文字提示，輸入要發送的資訊和接收資訊的使用者名 點選發送即可發送。
4.3 在接收資訊的使用者html頁面的控制台就可以看到發送方發送的資訊内容了。
![websocket 實戰——好友聊天JS websocket 實戰——好友聊天[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)