Search code examples
tizentizen-web-apptizen-wearable-sdk

Tizen Socket.io connection only works on 5.0


So I have a problem where my app only runs on 5.0 simulator. Ive tested the app on 4.0 - 5.0 - 5.5 - & 6.0.

The project was first created on 5.0 but I then re-did it on v 4.0 but still the same problem.

I'm thinking it has something to do with socket connection but why would it only work for 5.0? All I'm changing when testing is to choose a different emulator version.

INDEX

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Scheduled-countdown"/>

    <title>Scheduled-countdown</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>     
</head>

<body>
  <div class=container>
    
    
    <div class=centerContainer>
        <div id=ipInput style="height:100%">
<!--            Storage key:
           <input type="text" id="storageKey" style="width: 50px"/> -->
           ipAdress:
           <input type="text" id="storageData" style="width: 50%"/>
           <input type="button" id="save" value="SAVE" onclick="addStorage(); return false;"/>
           <h1 id="ipAdress">No Save ipAdress</h1>
        </div>
        
        
        
        <div id="currentTime"></div>
        <div id="title"></div>
        <div id="time"></div>
    </div>
  </div>  

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script>
          let countDownBool;
          let bgColor;
    
        var ipAdress = localStorage.getItem(localStorage.key("ipAdress"))
        console.log(ipAdress)
        var ipString = `http://192.168.8.124:3000`
        console.log(ipString)
        ipAdress.textContent = localStorage.getItem(localStorage.key("ipAdress"))
        
        
        const socket = io(ipString,{path: '/ws',});
        
        
        socket.on('connect', () => {
            console.log('SocketConnected!');
            document.getElementById("ipInput").style.display = "none";
            
            
        });
        
        socket.on('message', (data) => {
            const { type, message } = data;
            //console.log(type);
            
            if (type == "currentTime") {
                document.getElementById("currentTime").textContent = message;
                
                if (countDownBool){
                    //style.display = "block"; style.display = "none";
                    document.getElementById("currentTime").style.display = "none";
                    document.getElementById("title").style.display = "block";
                    document.getElementById("time").style.display = "block";
                    
                }else{
                    document.getElementById("currentTime").style.display = "block";
                    document.getElementById("title").style.display = "none";
                    document.getElementById("time").style.display = "none";
                }
                //console.log("currentTime");
                
            }
            
            if (type == "countDown") {
                document.getElementById("title").textContent = message.title;
                document.getElementById("time").textContent = message.time;
                
                if(message.bool){
                    countDownBool = true;
                    
                    
                    if (message.countDownTimeInMS > (-3*60000) && message.countDownTimeInMS < 0) {
                        bgColor = message.colors.countDownColor;
                    }else if(message.countDownTimeInMS > 0){
                        bgColor = message.colors.countUpColor;
                    }
                    
                    //-------------------
                      if(message.countDownTimeInMS > (-5*60000) && message.countDownTimeInMS < (-5*60000+1000)){
                      console.log("Vibrate 5");
                        navigator.vibrate([100, 100, 100, 100, 100, 100, 100, 100, 100, 100]);
                      }
                      if(message.countDownTimeInMS > (-4*60000) && message.countDownTimeInMS < (-4*60000+1000)){
                      console.log("Vibrate 4");
                        navigator.vibrate([100, 100, 100, 100, 100, 100, 100, 100]);
                      }
                      if(message.countDownTimeInMS > (-3*60000) && message.countDownTimeInMS < (-3*60000+1000)){
                      console.log("Vibrate 3");
                         navigator.vibrate([100, 100, 100, 100, 100, 100]);
                      }
                      if(message.countDownTimeInMS > (-2*60000) && message.countDownTimeInMS < (-2*60000+1000)){
                      console.log("Vibrate 2");
                         navigator.vibrate([100, 100, 100, 100]);
                      }
                      if(message.countDownTimeInMS > (-1*60000) && message.countDownTimeInMS < (-1*60000+1000)){
                      console.log("Vibrate 1");
                         navigator.vibrate([100, 100]);
                      }
                      if(message.countDownTimeInMS > (0) && message.countDownTimeInMS < (0+1000)){
                      console.log("Vibrate START");
                         navigator.vibrate([1000, 100, 1000, 100]);
                      }
                    //-------------------
                    
                }else{
                    countDownBool = false;
                    document.body.style.backgroundColor = "2b2b2b";
                }
    
            }
        });
        
    </script>
    
    <script>
        function addStorage() {
            //var key = document.getElementById('storageKey');
            var key = "ipAdress";
            var data = document.getElementById('storageData');
            
    
            /* Set the local storage item */
            if ('localStorage' in window) {
                localStorage.setItem(key.value, data.value);
                location.reload();
            } else {
                alert('no localStorage in window');
            }
    
            /* Set the session storage item */
            if ('sessionStorage' in window) {
                sessionStorage.setItem(key.value, data.value);
                location.reload();
            } else {
                alert('no sessionStorage in window');
            }
        }
    </script>

</html>

CONFIG

S<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/ScheduledCountdownTizen4" version="1.0.0" viewmodes="maximized">
    <access origin="https://cdnjs.cloudflare.com" subdomains="true"/>
    <tizen:application id="YGGUZsElLs.ScheduledCountdownTizen4" package="YGGUZsElLs" required_version="4.0"/>
    <author href="https://github.com/mattehalen/Scheduled-countdown" email="[email protected]">Mathias Halén</author>
    <tizen:background-category value="background-network"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>ScheduledCountdownTizen4</name>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:profile name="wearable"/>
    <tizen:setting background-support="enable" encryption="disable" hwkey-event="enable"/>
</widget>

Solution

  • The problem seems to be with your access origin.
    <access origin="https://cdnjs.cloudflare.com" subdomains="true"/>
    You should either modify your access origin to your IP String (192.168.8.124)
    <access origin="192.168.8.124:3000" subdomains="true"/>
    or make it *
    <access origin="*" subdomains="true"/>