直接贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 输入内容 -->
<input type="text" placeholder="输入你的内容" />
<!-- 发送请求 -->
<button>发送请求</button>
<!-- 显示结果 -->
<div></div>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
// 演示websocket在浏览器端如何使用
// H5已经直接提供了websocket的API,所以我们可以直接去使用
// 1. 创建websocket
// 参数1: websocket的服务地址
var socket = new WebSocket('ws://121.40.165.18:8800')
// 2. open: 当和websocket服务连接成功的时候触发
socket.addEventListener('open', function() {
div.innerHTML = '连接服务成功了'
})
// 3. 主动的给websocket服务发送消息
button.addEventListener('click', function() {
var value = input.value
socket.send(value)
})
// 4. 接收websocket服务的数据
socket.addEventListener('message', function(e) {
console.log(e.data)
div.innerHTML = e.data
})
socket.addEventListener('close', function() {
div.innerHTML = '服务断开连接'
})
</script>
</body>
</html>