websocket使用个人总结

来源：cnblogs　　作者：依旧那片天　　时间：2018/10/19 9:12:03　　对本文有异议

前言

一直在想要不要写下这篇，因为网上关于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>