거처를 모두에게 알리다.(실패편)

9469 단어 LineJavaScriptSocket.io
이 기사는 결국 예상대로 움직이지 않은 실패편이다.
다른 사람들이 똑같은 실수를 하지 않도록 공개하다.
전언
1월 말 RS conponects를 봤는데 랩베리 피4b 메모리 8G가 납품(2/2)이라 바로 주문했는데 2차 납기 변경으로 3월 28일 도착 예정입니다.안타깝게도 제이슨 미니도 정가로 팔지 않았다.
무사히 도착하면 다양한 시도를 해보고 싶어요.
지난번 글LINE BOT를 통해 Raspberry Pi에 연결된 USB 카메라 이미지 가져오기에 이어 가족에게 어떤 도움이 되는지 고려해 내가 어디에 있는지 가족에게 알리는 기능을 시행하기로 했다.
지적과 의문이 있으면 메시지를 남겨주세요.
결론(실패의 이유)
프런트엔드에서 개발한 사람들의 상식이지만 웹 브라우저에 화면이 표시될 때만 자바스크립트가 움직이지 않는다.
곰곰이 생각해 보면 당연한 일이지만 이를 눈치채지 못하고 컴퓨터 브라우저에 접속한 뒤 이 상태에서 LINE을 통해 스마트폰에서 컴퓨터의 현재 값을 받아내 기쁘다
실제 스마트폰으로 해보면 브라우저가 웹 서버에 접속한 상태에서 라인을 켜면 브라우저 자체가 숨김이 돼 현재 소재지를 확보하지 못하고 거기서 큰 오류가 발견됐다.
추가, 조사를 많이 해 서비스 워커로 위치 정보를 얻으려 했으나 배경 상태에서 위치 정보를 얻지 못해 포기했다.
하지만 이번 실패가 다른 사람에게 도움이 될 수도 있으니 먼저 보도해 봅시다.
구성&액션(실패편)
다음은 구성도와 간단한 동작입니다.

주소를 알려주고 싶은 사용자는 스마트폰, 브라우저를 통해 헤로쿠의 웹 서버에 접근할 수 있다.
(화면에 다음 화면이 표시됩니다.)

이때 연결을 유지하기 위해 WebSocket(socket.io)을 사용합니다.
확인자는 LINE에서 주소를 확인할 때 LINE bot에 메시지를 보냅니다.
LINE bot은 LINE Message를 받으면 heroku의 URL을 Webhook으로 알립니다.
heroku에서 node의 Javascript가 Line bot에서 주소를 확인하는 정보를 받은 후
웹 서버의 웹소켓을 통해 스마트폰에 주소를 확인하는 메시지를 보낸다.
주소 확인 정보를 받은 스마트폰은 현재치를 취득해 웹소켓을 통해 현재 소재지를 발송한다.
웹 서버가 현재 소재지를 확보하면 Heroku → LINE bot → 사용자 순서대로 현재 소재지를 보냅니다.
구축
환경 구성 정보
지난번 문장LINE BOT를 통해 Raspberry Pi에 연결된 USB 카메라 이미지 가져오기을 참조하세요.
(또 이번에 래스퍼리피 이하 집의 LAN 환경용 기자재는 모두 필요하지 않다.)
위 코드
주요 설명은 지난번 문장LINE BOT를 통해 Raspberry Pi에 연결된 USB 카메라 이미지 가져오기과의 차이이다.
heroku에서 nodejs로 자바스크립트를 이동합니다.
다음은 코드입니다.
heroku_app.js(클라이언트 코드)

app.get("/" + process.env.LOCATIONNAME, (req, res) => {
    console.log(process.env.LOCATIONNAME + " was opend.");

    // HTML code for position get
    let html_contents =
        `<!DOCTYPE html>
<html>
    <head><meta charset="UTF-8" /><title>Get</title>
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript">
            // success function
            function pos_handler(position) {
                console.log("pos_handler start...");

                // send latitude, longitude to heroku
                socket.emit("POST_LOCATION", { latitude: position.coords.latitude, longitude: position.coords.longitude });
            }

            // error function
            function error_handler(err) {
                console.log("ERROR(" + err.code + "): " + err.message);

                socket.emit("POST_LOCATION", { latitude: 0.0, longitude: 0.0 });
            }

            // connect server
            const socket = io({
                query: {
                    token: "${process.env.WEBSOCKET_TOKEN}"
                },
            });

            socket.on("GET_LOCATION", () => {
                console.log("GET_LOCATION Received...");
                navigator.geolocation.getCurrentPosition(pos_handler, error_handler, { enableHighAccuracy: true });
            });
        </script>
    </head>

    <body>
        Do not close this page because of running script for getting location.
    </body>
</html>`

    // return HTML
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write(html_contents);
    res.end();
});
process.env.URL이 LOCATIONNAME 환경 변수에 나타납니다.
우선, 먼저 socket입니다.io를 사용하여 WebSocket을 연결합니다.
연결 목적지가 지정되지 않았기 때문에 HTTPS를 통해 연결된 연결 목적지는 웹소켓으로 연결된다.
다음은 소켓.on, GET 사용LOCATION 이벤트가 발생한 후 navigator.geolocation.getCurrentPosition을 통해 현재 소재지, POST 획득LOCATION 활동이 발생하여 현재 소재지의 정보를 발송합니다.
heroku_app.js(2)
    socket.on("POST_LOCATION", (data) => {
        console.log(`reply of GET_LOCATION was received. latitude:${data.latitude} longitude:${data.longitude}`)

        // push api message
        getlocIDs.forEach((senderID) => {
            client.pushMessage(senderID, {
                type: "location",
                title: "パパの現在地",
                address: "パパの現在地",
                latitude: data.latitude,
                longitude: data.longitude,
            });

            // send message to owner 
            sendOwner(senderID, "パパの現在地");
        });
        // delete all elements of getpicIDs
        getlocIDs.splice(0);
    });
getlocids는 현재 값을 요청하는 LINE ID 목록입니다.
메일로 type을 location으로 설정하고 지도에 경도, 위도를 설정한 후 보냅니다.
원본 코드 한 세트가 tvca-line-bot에 있습니다. 보십시오.
여러 번 말했지만 브라우저가 열릴 때만 움직이기 때문에 원하는 동작이 없었다.
다음에는 성공편을 참조하시오.
총결산
웹학과가 상세하지 않아서 반했어요.
다음엔 성공편이죠?
Express + mongodb 웹 배경 인터페이스 개발
PHP - 배열의 모든 요소의 갯수를 셉니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage