<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>体验websocket</title>
<style>
#container {
width: 500px;
height: 400px;
border: 2px dashed #7575e7;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<input type="text" id="message" />
<button onclick="openWS()">建立连接</button>
<button onclick="sendMessage()">发送消息</button>
<button onclick="closeWS()">关闭连接</button>
<script>
var dom = document.getElementById('container')
var inputDom = document.getElementById('message')
var isOpen = false
var ws
var openWS = function () {
ws = new WebSocket('wss://echo.websocket.org')
ws.onopen = function (event) {
isOpen = true
dom.innerHTML = dom.innerHTML + `<p>与服务器成功建立连接</p>`
}
ws.onmessage = function (event) {
dom.innerHTML =
dom.innerHTML + `<p style='color: blue'>服务器说:${event.data}</p>`
}
ws.onclose = function () {
isOpen = false
dom.innerHTML = dom.innerHTML + `<p>与服务器连接关闭</p>`
}
}
var sendMessage = function () {
if (inputDom.value && isOpen) {
ws.send(inputDom.value)
dom.innerHTML =
dom.innerHTML + `<p style='color: red'>我说:${inputDom.value}</p>`
inputDom.value = ''
}
}
var closeWS = function () {
ws.close()
}
</script>
</body>
</html>
上面是业务代码，我的提问是为什么ws这个变量在 sendMessage和closeWS这两个函数中 依然能得到 ws是websocket这个实例呢？明明和上面的openWS函数不在一个作用域里面啊，这是为什么呢？
