zoukankan      html  css  js  c++  java
  • 【入门】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>

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

  • 相关阅读:
    [django]自定义标签和过滤器
    [js]js中6种错误处理机制
    [js] Array.slice和类数组转数组
    [js]this和call.call
    [py]python的time和datetime模块获取星期几
    CentOS 普通用户提升root权限
    CentOS ACL
    CentOS 文件隐藏属性
    CentOS 文件特殊权限SUID,SGID,SBIT
    CentOS 用户管理useradd、usermod等
  • 原文地址:https://www.cnblogs.com/linxian95/p/9808916.html
Copyright © 2011-2022 走看看