전체 글(56)
-
아고라 전화 수신 구현 중간 기록
절망적이다... flutter_callkit_incoming 패키지를 이용해 전화 수신 기능을 구현하고 있는데, 쉽지 않다...콜키트 수신 버튼을 타고 들어가면 통화 창이 뜨는데, 그 통화 창에서 목소리가 들리지 않는다. 앱 내의 전화걸기 버튼을 클릭하면 이런 식으로 전화 수신 알림이 온다. 전화를 하는 중에 같은 사람에게 전화를 걸면 위와 같은 회색 아이콘이 뜬다. 이런 식으로 네이티브 전화 앱에 통화 기록도 남는다. 조금 절망하다가 아예 처음부터 다시 했더니, 점점 풀리기 시작한다.통화 시작 - 종료 기능부터 튼튼하게 만들어둔 뒤 알림 구현을 시작했다. 알림이 오지 않는 문제가 있었는데, CallKitParams의 id 값을 고유한 값으로 설정해주지 않아 알림이 겹쳐서 생기는 문제였다.다른 전화 알..
2024.12.19 -
티스토리 인라인 코드블럭 백틱(`) 적용하기
https://memoirlog.tistory.com/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%B0%B1%ED%8B%B1%EC%9C%BC%EB%A1%9C-%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%BD%94%EB%93%9C-%EC%9E%85%EB%A0%A5%ED%95%98%EA%B8%B0-hELLO-%EC%8A%A4%ED%82%A8 [블로그] 티스토리 블로그 백틱(`)으로 인라인 코드 입력하기 (hELLO 스킨)2024.02.02 - [블로그] - [블로그] 티스토리 블로그 백틱(``)으로 인라인 코드 입력하기 [블로그] 티스토리 블로그 백틱(``)..
2024.12.15 -
아고라 전화 수신 기능 구현 1 - 상대방 네트워크 연결 확인 (자료조사)
아고라를 이용해 전화 기능을 구현하는 데까지는 성공했다.이제 상대방에게 전화를 요청한다는 알림을 보내는 것은 구현해보자. 더보기더보기기존 수파베이스+WebRTC 방식에서는 수파베이스 테이블을 구독하여 테이블에 변화가 생길 때마다 다이얼로그를 띄우도록 했으나, 이 방법을 사용 할 경우 모든 페이지마다 전화를 수신하게 해주는 함수를 init() 함수에 추가해야 했다. 또한 알림 형태가 아닌 다이얼로그였기 때문에 어플 화면을 나가면 알림을 받을 수 없다는 문제가 있었다.(자료조사를 하면서 알게 된 사실인데, 상태 관리 방식을 잘 사용하면 매 스크린마다 선언 할 필요없이 main에 한 번만 선언해주면 해결되는 듯 하기도 하다...) 이번에 구현 할 전화 수신 알림 기능의 목표는 총 두 가지이다.1. 전화 수신 ..
2024.12.15 -
[node.js] 아고라 토큰 발급 서버 만들기
통화 기능 구현 시 아고라를 사용하기로 했다. 통화를 할 때는 매번 토큰을 발급해줘야 하는데, 이때 노드를 사용해서 서버를 만들어 토큰 발급을 진행해준다. 1. 프로젝트 환경 설정Node.js 프로젝트를 초기화한다.$ mkdir agora-token-server$ cd agora-token-server$ npm init -y 필요한 패키지를 설치한다.$ npm install express cors body-parser agora-access-token dotenv2. Express 서버 생성원하는 에디터(nano, vim, etc...)를 이용해 server.js 파일을 생성한다.const express = require('express');const cors = require('cors');const..
2024.12.13 -
[node.js] 웹소켓 서버 만들기
플러터를 이용한 전화 기능 구현을 하고 있다.단순 TURN 서버 생성으로 끝날 줄 알았던 백엔드 작업이 하나 더 남아 있었다. ㅎㅏ... 전화 기능 하나 만들기 굉장히 쉽지 않다. web_socket.jsconst WebSocket = require('ws');// 명시적으로 IPv4 주소(0.0.0.0)를 사용const wss = new WebSocket.Server({ host: '0.0.0.0', port: 8080 });wss.on('connection', (ws) => { console.log('클라이언트가 연결되었습니다.'); ws.on('message', (message) => { console.log('Received:', message); ws.send(`Echo: ${me..
2024.12.09 -
nmap 사용해서 네트워크 포트 상태 확인하기 + 포트 열기
turn 서버를 이용한 전화 어플을 만드는 과정에서 데이터와이파이 간 연결이 안 되는 문제가 발생했다.디버깅 내역을 GPT에 보내보니 서버에서 Relay 후보는 생성되었지만 turn 서버를 통한 데이터 전달이 실패했을 가능성이 있다는 GPT 답변을 받았다.네트워크 방화벽이 TURN 서버와의 연결을 차단했는지 확인하기 위해 포트 상태를 확인해보려고 한다.$ brew install nmap$ nmap -p open: 포트가 열려 있으며 TURN 서버에 연결 가능한 상태closed: 포트가 닫혀 있어 연결 불가능한 상태filtered: 방화벽이 포트를 차단한 상태나의 경우에는 5349 포트는 차단된 상태이다. 혹시 모를 상황을 대비하여 포트를 열어주자. sudo ufw allow 5349 이후 포트가 잘 열..
2024.12.07