H5&CSS Basic —— 063. WebSocket (Not translated)
»
001. Free HTTPS Certificate
002. About The Column
003. Visible Area of Browser
004. Why ReactJs
005. Prohibit mobile scaling
006. EM in H5
007. Space width in page
008. H5 Special Characters
009. H5 Restricting Input
010. H5 Font
011. nginx redirection configuration
012. Text Indentation
013. Flex Layout
014. Gradient Borders
015. Common DOM Operations
016. Media Query
017. CSS Selectors
018. CSS alternate lines color
019. fetch
020. JS Attributes Operation
021. scroll div
022. JS for Loop
023. Prohibit Text Selection
024. Precision Controled Float Output
025. Ionic Full Screen
026. SVG Circle
027. SVG Ellipse
028. SVG Arc
029. SVG Elliptical Sector
030. Using WebAssembly
031. JS Checklist checkbox Operation
032. SVG Bezier Curve
033. Threejs Material
034. Luminous Image Styles
035. Web Animation Points
036. CSS Gradient Fonts
037. SVG Rectangle
038. Development Ability for Remuneration
039. Close Browser Default Style for Input
040. Jet Tail Particle Animation
041. Prohibit Desktop Browser Scaling JS
042. Desktop Full Screen Web CSS
043. Display images in self scaling aspect ratio div
044. Bi-side Text Alignment Styles
045. Single line ellipsis
046. Multi-line ellipsis
047. Font Transformation Styles
048. Remove default style of a tag
049. Chinese Characters: Full Width Space
050. DIV lays on DIV
051. Calculating 1rem Pixel Values in JS
052. JS Operations of DOM Parent Nodes and Adjacent Nodes
053. Absolute Coordinates of DOM Elements in JS
054. ToolTips Div
055. Height and Width in JS
056. Nginx configuration for stream media
057. Scroll Bar Style
058. Common Methods for JS Array Operations
059. SVG Fill Style Definition
060. SVG Stroke Style Definition
061. SVG Drawing Lines
062. CSS Background Images Splicing
063. WebSocket
064. JS Calculate DPI
065. GIF Opacity or not
066. Nginx solved CORS problem
067. Look At JsonP before publish
068. Center and Middle Content in Div
069. CSS background image size keeping ratio
070. CSS Frame Animation
071. CSS Same Width Font Display
072. Package
    H5实现的WebSocket长连接:

    // webSocket全局变量
    var socket = null;
    var keepAliveIntervalId=null;

    // 开启webSocket
    openWebSocket();

    function openWebSocket(){
        // 创建一个WebSocket实例(只能使用new WebSocket+websocket地址的方式)
        socket = new WebSocket('ws://your-websocket-server');

        // 当WebSocket连接打开时触发
        socket.onopen = function(event) {
            console.log('WebSocket 连接已打开');
            sendMessage("{\"msgType\":"tryConnect",\"token\":\"从web接口中获取到的用于关联websocket和用户session的token\"}");
        };
        
        // 当WebSocket接收到服务器发送的消息时触发
        socket.onmessage = function(event) {
            console.log('收到消息:', event.data);
        };
        
        // 当WebSocket连接关闭时触发,触发后等待5秒钟重新打开socket
        socket.onclose = function(event) {
            setTimeout(()=>{
                openWebSocket();
            },5000);
            console.log('WebSocket 连接已关闭');
        };
        
        // 当WebSocket通信发生错误时触发,触发后先关闭socket链接,再等待5秒钟重新打开socket
        socket.onerror = function(error) {
            socket.close();
            setTimeout(()=>{
                openWebSocket();
            },5000);
            console.error('WebSocket 出现错误:', error);
        };

        // 创建完成socket,设置定时器、每两秒钟调用keepALive一次,以保持session
        if(keepAliveIntervalId){
            clearInterval(keepAliveIntervalId);
        }
        keepAliveIntervalId=setInterval(()=>{
            sendMessage("{\"msgType\":\"keepALiveMessage\"}");
        },2000);
    }

    // 发送消息到WebSocket服务器
    function sendMessage(message) {
        if(socket&&socket.readyState === WebSocket.OPEN){
            socket.send(message);
        }
    }

    openWebSocket()函数中,代码的命令执行次序不用担心,因为,浏览器JS是单线程的。

    ————www.v-signon.com学习者共勉
                        
«
--Alex.Zhang
--www.v-signon.com Learningers Co-Encouraged
Back
Personal Art: www.up-task.com Unit: Individual
中文 Русский 京ICP备19038994号-2
If the content on this website infringes upon your any rights, please contact me at 1307776259@qq.com for removal