レンダリング
webSocket の主な機能は、リアルタイムの双方向通信を実現することです. http 通信との主な違いは、サーバーが websocket のフロントエンドに積極的にメッセージを送信できるのに対し、http では要求を受動的に受信して応答することしかできないことです.
下図に示すように、合計 4 つのクライアントがあり、1 人がメッセージを送信すると、すべてのクライアントが即座にメッセージを受信します。
フロントエンド WebSocket の使用
実際、フロントエンドの Websocket は非常に使いやすく、公式ドキュメントを見ると、Websocket オブジェクトのプロパティ、メソッド、およびイベントが少なく、非常に簡単に開始できることがわかります。WebSocket を使用するには、実際には次の 3 つの手順を実行する必要があることを簡単に説明します。
- WebSocket コンストラクターを呼び出して WebSocket オブジェクトを生成する
- WebSocket のイベント リスナーを追加する
- オブジェクトの send メソッドを呼び出してメッセージを送信する
フロントエンドのコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="chat-box">
<h3>聊天内容</h3>
</div>
<textarea class="message"></textarea>
<button class="send">发送</button>
</div>
<script>
const chatBox = document.querySelector('.chat-box')
const textarea = document.querySelector('.message')
const sendButton = document.querySelector('.send')
// 生成WebSocket对象
const ws = new WebSocket('ws://localhost:9002/ws')
// 为WebSocket添加事件监听
ws.addEventListener('message', function (event) {
const li = document.createElement('li')
li.innerText = event.data
chatBox.append(li)
});
ws.addEventListener('open', () => {
console.log('websocket连接建立完毕')
})
sendButton.addEventListener('click', () => {
// 发送消息
ws.send(textarea.value)
})
</script>
<style>
.container{
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
border: 2px rgb(10, 193, 89) dashed;
padding: 5px;
}
.chat-box{
padding: 0 10px;
overflow: auto;
height: 60%;
width: 100%;
border: rgb(205, 37, 37) solid 2px;
}
.chat-box > h3{
margin: 0;
text-align: center;
overflow: auto;
}
.message{
width: 100%;
height: 15%;
}
.send{
height: 15%;
width: 100%;
font-size: larger;
}
</style>
</body>
</html>
バックエンド WebSocket サーバー
バックエンドで WebSocket サーバーを実装することは、上記のフロントエンドの手順よりもはるかに困難です。これは、複数人のインスタント チャットの必要性には必然的にマルチスレッドおよびスレッド間通信が含まれ、失敗、エラー、およびリサイクルなどの問題。もともとこのwebsocketサーバーを書くためにgolangを勉強して使おうと思っていたのですが、ドキュメントを2時間も読んだだけでは全然理解できませんでした(lll￢ω￢)。残念ながらバックエンドの知識がまだまだ浅く、スキル不足で io 操作やスレッド操作が多く理解できません。
ここでは、nodejs を使用して単純な WebSocket サーバーを実装します。具体的には ws ライブラリを使用します。コードは次のとおりです。
// 导入WebSocket模块:
const WebSocket = require('ws');
// 引用Server类:
const WebSocketServer = WebSocket.Server;
// 实例化:
const wss = new WebSocketServer({
port: 9002,
path: '/ws'
});
let wsList = []
// 监听创建连接事件，回调函数的参数是创建的连接
wss.on('connection', function connection(ws) {
ws.on('error', console.error)
// 监听该连接的接收信息事件
ws.on('message', function message(data) {
console.log('接收到信息: %s', data)
for(let w of wsList){
if(w.readyState == w.OPEN){
w.send(data.toString())
}
}
})
wsList.push(ws)
})