webSocket是HTMI5提供的一种单个tcp链接上进行全双 工通讯的协议。
一般为了实现推送技术，我们现在使用的是ajax轮询，这样有很多缺点，带宽，服务器资源。而WebSocket协议就能很好的解决这些问题并且实现实时地进行通讯。
image.png
1、只读属性readyState 表示连接状态。0：代表连接尚未建立，1：代表连接已建立，可以进行通讯，2：代表连接正在进行关闭，3：代表连接已经关闭或者连接不能打开。
2、只读属性bufferedAmount 已被send()放入正在队列中等待传输，但是还没有发出UTF-8文本字节。
3、binaryType返回websocket连接所传输的二进制数据类型，(返回值”blob“,"arraybuffer")
4、onmessage属性是一个当收到来自服务器的消息时被调用。
5、onclose 属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用，
6、onapen属性定义一个事件处理程序，当WebSocket 的连接状态readyState 变为1时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发
三、WebSocket方法
.send()使用连接发送数据
.close()关闭连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket</title>
</head>
<body>
<script>
function WebSocketTest(){
if("WebSocket" in window){
console.log("你的浏览器支持WebSocket!")
var ws = new WebSocket('ws://localhost:8080/');
// wss://echo.websocket.org
// ws://localhost:8080/
console.log("连接成功")
console.log("++++++++++");
ws.onopen = function(){//连接建立时触发
ws.send("这是发sss送ssss数据");// Web Socket 已连接上，使用 send() 方法发送数据
};
ws.onmessage = function(event) {
console.log('hello：'+event.data,);
};
ws.onclose = function()
{
// 关闭 websocket
console.log("连接已关闭...");
};
}else{
alert("你的浏览器不支持WebSocket")
}
}
</script>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>
网友评论