【入门】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>

更多的实例属性和方法点这里

原文地址:https://www.cnblogs.com/linxian95/p/9808916.html