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

4）open：当一个 WebSocket 连接成功时触发，也可以通过 onopen 属性来设置。
介绍完 WebSocket API，我们来举一个使用 WebSocket 发送普通文本的示例。

4.6 代码实践：发送普通文本

在以上示例中：我们在页面上创建了两个 textarea，分别用于存放 待发送的数据 和 服务器返回的数据。当用户输入完待发送的文本之后，点击 发送 按钮时会把输入的文本发送到服务端，而服务端成功接收到消息之后，会把收到的消息原封不动地回传到客户端。
// const socket = new WebSocket("ws://echo.websocket.org");
// const sendMsgContainer = document.querySelector("#sendMessage");
function send() {
const message = sendMsgContainer.value;
if(socket.readyState !== WebSocket.OPEN) {
console.log("连接未建立，还不能发送消息");
return;
}
if(message) socket.send(message);
}
当然客户端接收到服务端返回的消息之后，会把对应的文本内容保存到 接收的数据 对应的 textarea 文本框中。
// const socket = new WebSocket("ws://echo.websocket.org");
// const receivedMsgContainer = document.querySelector("#receivedMessage");