71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
<!--
|
||
WebSocket Client (browser demo)
|
||
ECMAScript
|
||
-->
|
||
<!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>
|
||
<script>
|
||
|
||
let wsInstance = null
|
||
function createNewConn() {
|
||
let ws = new WebSocket('ws://localhost:8080/v2/ws')
|
||
// readyState返回当前实例对象的当前状态
|
||
/*
|
||
共有四种状态
|
||
CONNECTING: 值为0，表示正在连接
|
||
OPEN: 值为1，表示连接成功，可以通信了
|
||
CLOSING 值为2， 表示连接正在关闭
|
||
CLOSED 值为3，表示连接已经关闭了，或者打开连接失败
|
||
*/
|
||
|
||
// 实例对象的onopen属性，用于指定连接成功后的回调函数
|
||
ws.onopen = (res) => {
|
||
console.log('onopen readyState', ws.readyState)
|
||
console.log('onopen 连接成功==========>', res)
|
||
}
|
||
|
||
// 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
|
||
ws.onmessage = ({ data }) => {
|
||
console.log('onmessage readyState', ws.readyState)
|
||
// 注意此时的data是json格式的 需要转化下
|
||
console.log('onmessage 有新消息啦=======>', JSON.parse(data))
|
||
// 实例对象的send方法给服务器发送消息
|
||
ws.send('客户端发送的消息')
|
||
}
|
||
|
||
// 实例对象的onclose属性，用于连接关闭后的回调 函数
|
||
// 当关闭了服务器后 会走到此回调函数
|
||
ws.onclose = () => {
|
||
console.log('onclose readyState', ws.readyState)
|
||
console.log('onclose websocket连接关闭=======>')
|
||
setTimeout(() => {
|
||
wsInstance = createNewConn()
|
||
}, 3000)
|
||
}
|
||
|
||
// 连接发生错误的回调方法
|
||
// 如当服务器没有启动 就会走到这个错误回调
|
||
ws.onerror = (error) => {
|
||
console.log('onerror readyState', ws.readyState)
|
||
console.log('onerror 发生错误==========>', error)
|
||
}
|
||
return ws
|
||
}
|
||
|
||
// 创建webscoket 对象 地址填入本地ip 端口是在搭建websocket服务器定义的端口
|
||
wsInstance = createNewConn()
|
||
// 执行上面的语句之后，客户端就会与服务器进行连接
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |