websocket使用个人总结
程序员文章站
2022-04-09 14:53:50
前言 一直在想要不要写下这篇，因为网上关于websocket的介绍和使用的好文实在太多太多，例如有这篇和这篇。 但我不管了，写下来，这样我就不用在想使用的时候总是去翻写过的源码了。 先回答几个简单的问题。 什么是websocket？websocket有什么用？什么时候用websocket？ 这几个问 ......
前言
一直在想要不要写下这篇，因为网上关于websocket的介绍和使用的好文实在太多太多，例如有和。
但我不管了，写下来，这样我就不用在想使用的时候总是去翻写过的源码了。
先回答几个简单的问题。
什么是websocket？websocket有什么用？什么时候用websocket？
这几个问题一起回答。websocket 是 html5 开始提供的一种在单个 tcp 连接上进行全双工通讯的协议。
全双工的意思差不多就是客户端可以向服务器通信，服务器也可以向客户端通信，
而以前使用的http协议只能客户端向服务器通信，如果想要得到服务器的消息，只能不断地向服务器发起请求，
然而实在没什么消息的话，不断发请求实则是一种资源浪费，所以这种时候就需要使用websocket了。
websocket能保持一种长连接，而且服务器能主动向客户端发消息，对于那种需要保持长时间联系的场景那再适合不过了！
实例
websocket的使用非常的简单，下面是一个实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>websocket</title>
</head>
<body>
<button id="openws">连接</button>
<button id="closews">关闭</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var ws; // 先创建一个全局变量
$('#openws').click(function(){
// 创建websocket的实例
// 实例一旦成功创建就会建立websocket连接
ws = new websocket('ws://xxx.com');
});
// 主动关闭连接
$('#closews').click(function(){
ws.close();
});
// 监听打开
ws.onopen = function() {
console.log('连接成功');
// 做你想做的事
};
// 监听错误
ws.onerror = function(){
console.log('连接失败');
// 做你想做的事
};
// 监听消息
ws.onmessage = function(data) {
console.log(data);
// 做你想做的事
};
// 监听窗口关闭 在窗口关闭前自动关闭连接
ws.onbeforeunload = function(){
ws.close();
};
// 监听关闭
ws.onclose = function() {
console.log('连接关闭');
// 做你想做的事
};
// 在建立websocket连接之后，就可以向服务器发送消息
var data = '我想告诉你';
ws.send(data);
</script>
</body>
</html>
更多的实例属性和方法点这里。