smartphone compatibility and url timeout added
This commit is contained in:
		
							parent
							
								
									083219b350
								
							
						
					
					
						commit
						5af8687ebb
					
				
							
								
								
									
										13
									
								
								index.js
									
									
									
									
									
								
							
							
						
						
									
										13
									
								
								index.js
									
									
									
									
									
								
							@ -83,10 +83,6 @@ wss.on('connection', ws => {
 | 
				
			|||||||
      else if (msg[1].length > 2000) ws.send('error;your url is too long')
 | 
					      else if (msg[1].length > 2000) ws.send('error;your url is too long')
 | 
				
			||||||
      else{
 | 
					      else{
 | 
				
			||||||
        let xhr = new XMLHttpRequest();
 | 
					        let xhr = new XMLHttpRequest();
 | 
				
			||||||
        console.log(msg[1])
 | 
					 | 
				
			||||||
        xhr.timeout = 1000;
 | 
					 | 
				
			||||||
        xhr.open('GET', msg[1], true);
 | 
					 | 
				
			||||||
        xhr.ontimeout = function(e) {ws.send('error;url timed out')}
 | 
					 | 
				
			||||||
        xhr.onreadystatechange = function() {
 | 
					        xhr.onreadystatechange = function() {
 | 
				
			||||||
          if (xhr.readyState === 4) {
 | 
					          if (xhr.readyState === 4) {
 | 
				
			||||||
            switch(xhr.status) {
 | 
					            switch(xhr.status) {
 | 
				
			||||||
@ -95,11 +91,8 @@ wss.on('connection', ws => {
 | 
				
			|||||||
                //write to redis
 | 
					                //write to redis
 | 
				
			||||||
                redis_cli.hmset("surl;"+ran_key, "url", msg[1], "time", Date.now())
 | 
					                redis_cli.hmset("surl;"+ran_key, "url", msg[1], "time", Date.now())
 | 
				
			||||||
                ws.send('surl;'+host+ran_key)
 | 
					                ws.send('surl;'+host+ran_key)
 | 
				
			||||||
                console.log('key;'+ran_key)
 | 
					                console.log(ran_key+' --> '+msg[1])
 | 
				
			||||||
                break;
 | 
					                break;
 | 
				
			||||||
              case 301: ws.send('error;the url is redirecting (301)');break;
 | 
					 | 
				
			||||||
              case 302: ws.send('error;the url is redirecting (302)');break;
 | 
					 | 
				
			||||||
              case 303: ws.send('error;the url is redirecting (303)');break;
 | 
					 | 
				
			||||||
              case 404: ws.send('error;site does not exist (404)');break;
 | 
					              case 404: ws.send('error;site does not exist (404)');break;
 | 
				
			||||||
              case 502: ws.send('error;remote server error (502)');break;
 | 
					              case 502: ws.send('error;remote server error (502)');break;
 | 
				
			||||||
              case 500: ws.send('error;remote server error (500)');break;
 | 
					              case 500: ws.send('error;remote server error (500)');break;
 | 
				
			||||||
@ -108,7 +101,11 @@ wss.on('connection', ws => {
 | 
				
			|||||||
            }
 | 
					            }
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					        xhr.open('GET', msg[1], true);
 | 
				
			||||||
 | 
					        xhr.timeout = 1000;
 | 
				
			||||||
 | 
					        xhr.ontimeout = function(e) {ws.send('error;url is to slow')}
 | 
				
			||||||
        xhr.send();
 | 
					        xhr.send();
 | 
				
			||||||
 | 
					        setTimeout(to => {if (xhr.readyState !== 4) ws.send('error;url timed out');xhr.abort()}, 1500)
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
 | 
				
			|||||||
@ -3,11 +3,12 @@
 | 
				
			|||||||
		<title>sURL</title>
 | 
							<title>sURL</title>
 | 
				
			||||||
		<meta charset="utf-8">
 | 
							<meta charset="utf-8">
 | 
				
			||||||
		<!-- PWA support -->
 | 
							<!-- PWA support -->
 | 
				
			||||||
		<link rel="manifest" href="/manifest.json">
 | 
							<link rel="manifest" href="/manifest.json"/>
 | 
				
			||||||
		<meta name="theme-color" content="#2F3BA2">
 | 
							<meta name="theme-color" content="#2F3BA2"/>
 | 
				
			||||||
		<meta name="description" content="short your url">
 | 
							<meta name="description" content="short your url"/>
 | 
				
			||||||
 | 
							<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		<link rel="stylesheet" type="text/css" href="./sym/dark.css">
 | 
							<link rel="stylesheet" type="text/css" href="./sym/dark.css"/>
 | 
				
			||||||
		<script src="./sym/script.js"></script>
 | 
							<script src="./sym/script.js"></script>
 | 
				
			||||||
		<script>
 | 
							<script>
 | 
				
			||||||
			const wsurl = 'ws://127.0.0.1:8081'
 | 
								const wsurl = 'ws://127.0.0.1:8081'
 | 
				
			||||||
@ -51,7 +52,7 @@
 | 
				
			|||||||
			<div class="title">short your url</div>
 | 
								<div class="title">short your url</div>
 | 
				
			||||||
			<form name="surl_form" action="javascript:lurl_submit()">
 | 
								<form name="surl_form" action="javascript:lurl_submit()">
 | 
				
			||||||
				<div class="input-field" id="longurl">
 | 
									<div class="input-field" id="longurl">
 | 
				
			||||||
					<input class="input" id="longurl-input" type="text" onblur="deselected('longurl');" onfocus="selected('longurl');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk">
 | 
										<input class="input" id="longurl-input" type="text" autocomplete="off" onblur="deselected('longurl');" onfocus="selected('longurl');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk">
 | 
				
			||||||
				</div>
 | 
									</div>
 | 
				
			||||||
				<input type="hidden" value="search" name="login">
 | 
									<input type="hidden" value="search" name="login">
 | 
				
			||||||
				<a href="javascript:lurl_submit()">
 | 
									<a href="javascript:lurl_submit()">
 | 
				
			||||||
 | 
				
			|||||||
@ -10,8 +10,8 @@ body{
 | 
				
			|||||||
    padding-top: 20px;
 | 
					    padding-top: 20px;
 | 
				
			||||||
    padding-bottom: 130px;
 | 
					    padding-bottom: 130px;
 | 
				
			||||||
    min-height: calc(100% - 150px);
 | 
					    min-height: calc(100% - 150px);
 | 
				
			||||||
    max-width: 60rem;
 | 
					    max-width: 70rem;
 | 
				
			||||||
    min-width: 30rem;
 | 
					    min-width: 25rem;
 | 
				
			||||||
    margin: auto;
 | 
					    margin: auto;
 | 
				
			||||||
    background-color: #1f262b;
 | 
					    background-color: #1f262b;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@ -62,7 +62,7 @@ td.mid,th.mid{
 | 
				
			|||||||
div.input-box {
 | 
					div.input-box {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
    left: calc(50% - 14rem);
 | 
					    left: calc(50% - 14rem);
 | 
				
			||||||
    top: calc(50% - 100px);
 | 
					    top: calc(50% - 7rem);
 | 
				
			||||||
    width: 28rem;
 | 
					    width: 28rem;
 | 
				
			||||||
    height: 14rem;
 | 
					    height: 14rem;
 | 
				
			||||||
    background-color: #14181b00;
 | 
					    background-color: #14181b00;
 | 
				
			||||||
@ -71,21 +71,18 @@ div.input-box {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
div.input-field {
 | 
					div.input-field {
 | 
				
			||||||
    position: relative;
 | 
					    position: relative;
 | 
				
			||||||
    left: 0px;
 | 
					 | 
				
			||||||
    top: 0px;
 | 
					 | 
				
			||||||
    margin-left: 5%;
 | 
					    margin-left: 5%;
 | 
				
			||||||
    margin-top: 20px;
 | 
					    margin-top: 20px;
 | 
				
			||||||
    width: 90%;
 | 
					    width: 90%;
 | 
				
			||||||
    height: 2.5rem;
 | 
					    height: 2.5rem;
 | 
				
			||||||
    background-color: #14181b;
 | 
					    background-color: #14181b;
 | 
				
			||||||
    border-radius: 0.6rem;
 | 
					    border-radius: 1.25rem;
 | 
				
			||||||
    border: 1px solid #fff;
 | 
					    border: 1px solid #fff;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.input {
 | 
					.input {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
    left: 1rem;
 | 
					    left: 1rem;
 | 
				
			||||||
    top: 50%;
 | 
					    top: calc(50% - 1rem);
 | 
				
			||||||
    margin-top: -15px;
 | 
					 | 
				
			||||||
    width: calc(100% - 2rem);
 | 
					    width: calc(100% - 2rem);
 | 
				
			||||||
    height: 2rem;
 | 
					    height: 2rem;
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
@ -118,7 +115,7 @@ input[id="longurl-input"]::-webkit-input-placeholder {
 | 
				
			|||||||
    top: 50%;
 | 
					    top: 50%;
 | 
				
			||||||
    left: 50%;
 | 
					    left: 50%;
 | 
				
			||||||
    transform: translate(-50%, -50%);
 | 
					    transform: translate(-50%, -50%);
 | 
				
			||||||
    font-size: 15pt;
 | 
					    font-size: 1.4rem;
 | 
				
			||||||
    color:#fff;
 | 
					    color:#fff;
 | 
				
			||||||
    font-family:Arial, "lucida console", sans-serif;
 | 
					    font-family:Arial, "lucida console", sans-serif;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@ -203,7 +200,7 @@ img.icon {
 | 
				
			|||||||
    margin-top: 1rem;
 | 
					    margin-top: 1rem;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
#surl-popup{
 | 
					#surl-popup{
 | 
				
			||||||
    position: fixed;
 | 
					    position: absolute;
 | 
				
			||||||
    width: 30rem;
 | 
					    width: 30rem;
 | 
				
			||||||
    height: 14rem;
 | 
					    height: 14rem;
 | 
				
			||||||
    left: calc(50% - 15rem);
 | 
					    left: calc(50% - 15rem);
 | 
				
			||||||
@ -216,7 +213,6 @@ img.icon {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
@keyframes slide-from-top{
 | 
					@keyframes slide-from-top{
 | 
				
			||||||
     from{top:20%;opacity: 0}
 | 
					     from{top:20%;opacity: 0}
 | 
				
			||||||
     to{top:calc(50% - 7rem);opacity: 1}
 | 
					     to{top:calc(50% - 7rem);opacity: 1}
 | 
				
			||||||
@ -225,3 +221,23 @@ img.icon {
 | 
				
			|||||||
    from{left:-30rem;opacity: 0}
 | 
					    from{left:-30rem;opacity: 0}
 | 
				
			||||||
    to{left:1rem;opacity: 1}
 | 
					    to{left:1rem;opacity: 1}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media (max-width: 35rem){
 | 
				
			||||||
 | 
					    div.input-box {
 | 
				
			||||||
 | 
					        left: 5%;
 | 
				
			||||||
 | 
					        width: 90%;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .error{
 | 
				
			||||||
 | 
					        bottom: 1rem;
 | 
				
			||||||
 | 
					        left: 1rem;
 | 
				
			||||||
 | 
					        height: 8rem;
 | 
				
			||||||
 | 
					        width: calc(100% - 2rem);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    #surl-popup{
 | 
				
			||||||
 | 
					        width: calc(100% - 2rem);
 | 
				
			||||||
 | 
					        height: 14rem;
 | 
				
			||||||
 | 
					        left: 1rem;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user