万字长文，一篇吃透WebSocket：概念、原理、易错常识、动手实践(12)

<div style="display: flex;">
<div class="block">
<p>待发送的数据：<button>发送</button></p>
<textarea id="sendMessage"rows="5"cols="15"></textarea>
</div>
<div class="block">
<p>接收的数据：</p>
<textarea id="receivedMessage"rows="5"cols="15"></textarea>
</div>
</div>
<script>
const sendMsgContainer = document.querySelector("#sendMessage");
const receivedMsgContainer = document.querySelector("#receivedMessage");
const socket = new WebSocket("ws://echo.websocket.org");
// 监听连接成功事件
socket.addEventListener("open", function(event) {
console.log("连接成功，可以开始通讯");
});
// 监听消息
socket.addEventListener("message", async function(event) {
console.log("Message from server ", event.data);
const receivedData = event.data;
if(receivedData instanceofBlob) {
receivedMsgContainer.value = await receivedData.text();