전체 글 552

크롬 비활성화된 탭 네트워크(웹소켓) 끊어지는 현상 Intensive Wake Up Throttling

현재 크롬에서 웹소켓으로 전문을 송수신 하고 있습니다. 콘솔로그로 1초마다 지켜보고 있고 30초마다 서버와 접속하여 끊어지는 현상을 방지하고 있습니다. 그런데 소켓 연결된 탭을 비활성화 즉 다른 탭을 열고 작업을 하고 있으면 12분~13분 후에 소켓이 끊어져버립니다. onClose 에서도 감지를 못합니다. Intensive Wake Up Throttling Chrome 브라우저가 최소화되거나 초점이 맞지 않은 상태에서 5~6분 후에 웹소켓 연결이 끊길 수 있습니다. "Connection closed: 1001 Going Away (The endpoint is going away due to a server failure or client navigation), clean closure: true" 메시지..

프로그래밍/Js 2023.03.07

안드로이드 웹뷰와 웹워커 브릿지 (android + webview + webworker bridge example) 샘플

목적 안드로이드에서 웹뷰를 실행한후 브릿지를 이용하여 연동하는 방법과 웹뷰와 웹워커를 이용합니다. 서버에서 받은 TR 을 분석하는 일을 웹워커에게 전달후 TR 분석 작업이 끝나면 json 데이터를 html 페이지에 돌려주는 방법 입니다. 또한 디자인패턴의 테플릿 메소드 패턴을 사용하여 추가되는 TR 분석은 클래스만 만들어서 사용합니다. 하고자 하는 것을 정리해보면 아래와 같습니다. 웹뷰에서 조회1 클릭 네이티브로 데이터 전송 ( TrMake.js window.HybridApp.sendMessage ) 네이티브에서 데이터 받음 ( webView.addJavascriptInterface(new AndroidBridge(), "HybridApp"); ) 네이티브 -> TR 서버 데이터 전송 서버 TR 응답 데..

프로그래밍/Js 2023.02.28

안드로이드 TCP Socket + Webview bridge 샘플

목적 : 안드로이드 webview 와 native 간의 bridge 를 이용하여 연결하는 방법을 알아보도록 하겠습니다. 또한 native 는 TCP Socket 을 이용하여 데이터 전송을 할 예정입니다. 다소 복잡할것 같지만 소스 보면서 확인하시죠 안드로이드 AndroidManifest.xml MainActivity.java package com.example.worker_bridge; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.os.StrictMode; import android.util.Log; import android.view.View; import android..

방법2 WebRTC localhost Socket.io + Node.js 내부네트워크 정상 (1차완료)

모든 방법은 아래 글을 보고 참고했습니다. step-05 사용 turn 임대서버를 사용했음에도 본테스트는 안됨 내부네트워크에서만 작동함 https://codelabs.developers.google.com/codelabs/webrtc-web/#7 Real time communication with WebRTC | Google Codelabs Learn how to stream media and data between two browsers. Get to grips with the core APIs and technologies of WebRTC. Capture and manipulate images using getUserMedia, CSS, and the canvas element. Set up a p..

프로그래밍/Js 2023.02.22

방법1 WebRTC Socket.io + Node.js + turn 임대 서버 이용방법 (1차완료)

WebRTC 를 이용하여 화상 채팅을 만들어 보도록 하겠습니다. 본 포스트는 turn 서버를 임대하여 내부 네트워크 와 외부 네트워크 간의 화상 채팅 성공 코드 입니다. 모든 기본 소스와 설명은 아래 링크를 참조했습니다. https://levelup.gitconnected.com/building-a-video-chat-app-with-node-js-socket-io-webrtc-26f46b213017 Building a Video Chat App with Node.js + Socket.io + WebRTC This tutorial will show you how to build a video chat app using JavaScript and NodeJS. It will also show you how..

프로그래밍/Js 2023.02.22

webRTC 카메라/오디오 권한 획득 기본 샘플

WebRTC 에서 카메라 권한 부분을 확인해 보도록 하겠습니다. 모든 WebRTC 는 HTTPS (SSL) 브라우져에서만 사용할수 있습니다. getUserMedia() 위 메서드는 요청된 미디어 유형을 포함하는 트랙을 생성하여 미디어 입력을 사용할수 있는 권한을 사용자에 요청합니다. 그 스트림은 예를 들어 비디오 트랙(하드웨어 또는 카메라, 비디오 녹화 장치, 화면 공유 서비스 등과 같은 가상 비디오 소스에 의해 생성됨), 오디오 트랙(유사하게 물리적 또는 마이크, A/D 변환기 등과 같은 가상 오디오 소스) 및 가능한 기타 트랙 유형. getUserMedia() 는 Promise 객체로 반환됩니다. # 다이렉트 navigator.mediaDevices.getUserMedia(mediaStreamCons..

프로그래밍/Js 2023.02.21

webRTC 이용하여 비디오 채팅 방법 with Node.js + Socket.io

webRTC 를 이용하여 비디오 채팅방을 만들어보도록 하겠습니다. webRTC 는 https 이용해야 하기 때문에 node exporess 에서 SSL 적용을 해줘야 합니다. 최종화면 기본적인 SSL ssl_server.js // Dependencies const fs = require('fs'); const http = require('http'); const https = require('https'); const express = require('express'); const app = express(); // Certificate 인증서 경로 const privateKey = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.key', 'utf8'); const ce..

프로그래밍/Js 2023.02.21

flutter webview 와 네이티브간의 데이터 통신 webview-javascript-bridge 사용

flutter 네이티브와 웹뷰와 데이터 통신하는 방법을 알아보도록 하겠습니다. webview 에서 버튼을 클릭하면 javascript 함수에서 flutter 를 호출합니다. 버튼 클릭시 webviewjsbridge 로 전송됩니다. decoding 해보겠습니다. 웹페이지의 javascript 에서 보낸 json 이 출력됩니다. . webview -> 네이티브 /lib/main.dart /* https://github.com/flutter/flutter/issues/117333 https://pub.dev/packages/webview_javascript_bridge https://blog.steinjun.net/post/8 */ import 'package:flutter/material.dart'; imp..