Socket.IO 채팅 만들기 1편: Node.js 서버와 웹 클라이언트 구현

이미지
전면 개정 안내 (2026-07-24) 2022년에 작성한 설치 중심의 글을 Socket.IO 4.x와 ES Modules 기준으로 다시 작성했습니다. 이번 글을 끝까지 따라 하면 방에 입장하고 메시지를 주고받는 웹 채팅을 실행할 수 있습니다. Socket.IO 채팅의 핵심은 단순히 emit() 한 번을 호출하는 것이 아닙니다. 서버가 사용자를 식별하고, 올바른 방에 메시지를 전달하며, 연결이 끊겼을 때의 상태와 중복 전송까지 다뤄야 합니다. 이 글에서는 먼저 학습용으로 충분히 작으면서도 다음 기능을 갖춘 채팅을 만듭니다. 닉네임과 방 이름을 입력해 입장 같은 방의 사용자에게만 메시지 전송 서버에서 입력값과 방 입장 여부 검증 ACK(승인 응답)로 전송 성공 여부 확인 일시적인 연결 끊김 후 상태 복구 메시지 ID를 이용한 화면 중복 표시 방지 Socket.IO와 WebSocket은 같은 것일까? 완전히 같지는 않습니다. WebSocket은 양방향 통신 프로토콜이고, Socket.IO는 그 위에서 이벤트, 자동 재연결, 승인 응답, 방(Room), 브로드캐스트 같은 기능을 제공하는 라이브러리입니다. 환경에 따라 HTTP long-polling으로 연결한 뒤 WebSocket으로 업그레이드할 수도 있습니다. 따라서 순수 WebSocket 서버에 Socket.IO 클라이언트를 바로 연결할 수는 없습니다. 서버와 클라이언트가 모두 Socket.IO 프로토콜을 사용해야 합니다. 항목 WebSocket Socket.IO 통신 방식 표준 프로토콜 이벤트 기반 라이브러리 자동 재연결 직접 구현 기본 제공 방과 브로드캐스트 직접 구현 기본 제공 ACK 직접 메시지 규약 설계 콜백 방식 제공 전송 폴백 없음 long-polling 후 업그레이드 가능 1. 프로젝트 만들기 Node.js의 지원 중인 LTS 버전을 사용합니다. 빈 폴더에서 다음 명령을 실행하세요. bash ...

Android Retrofit2 RxJava polling: 일정 간격으로 API 호출하기

이 글은 2022년에 작성한 내용을 2026년 기준으로 전면 개정한 글입니다. 기존 URL은 유지하면서 오래된 코드와 사라진 참고 링크를 정리하고, 수명주기를 고려한 RxJava polling 구현과 Kotlin Coroutines 대안까지 새로 작성했습니다. Android Retrofit2 RxJava polling: 일정 간격으로 API 호출하기 안드로이드 앱에서 서버 상태, 장치 상태 또는 작업 진행률을 몇 초마다 확인해야 할 때가 있습니다. 서버가 WebSocket이나 푸시 방식을 제공하지 않는다면 일정한 간격으로 API를 호출하는 polling 방식이 가장 단순한 해결책입니다. 하지만 단순히 타이머에서 Retrofit을 반복 호출하면 다음과 같은 문제가 생길 수 있습니다. 이전 요청이 끝나기 전에 다음 요청이 시작됨 화면이 사라진 뒤에도 네트워크 요청이 계속됨 오류가 한 번 발생하면 전체 polling이 종료됨 Activity 또는 Fragment가 다시 만들어질 때 polling이 중복 실행됨 Disposable을 정리하지 않아 메모리 누수가 발생함 이 글에서는 Retrofit2와 RxJava를 이용해 이러한 문제를 피하는 구현을 만들어 봅니다. 마지막에는 현재 안드로이드에서 널리 사용하는 Kotlin Coroutines와 Flow 방식도 비교합니다. 문제 이 글에서 사용하는 해결 방법 첫 호출이 늦음 interval(0, 10, ...) 으로 즉시 시작 이전 요청과 다음 요청이 겹침 switchMapSingle() 로 최신 요청만 유지 한 번의 오류로 polling 종료 API 요청 내부에서 오류를 상태 값으로 변환 화면이 사라져도 계속 호출 onStart() 와 onStop() 에서 시작·중지 polling이 중복 실행됨 기존 Disposable 상태 확인 ViewModel 제거 후 작업이 남음 onCleared() 에서 Disposable 정리 예제의 동작 ...

nodejs express jwt 적용 (mysql) restfulserver 기존 로그인 시스템 다시 구성

이미지
 기존 로그인 시스템 다시 구성 node.js 기반 restful server 구축 이다. base source 는  https://www.bezkoder.com/node-js-jwt-authentication-mysql/ 이다. 중요 내용중에 하나  sequize 적용 시  n:m 관계설정이 있고 중개테이블 설정하는 부분이 있다  이부분이 여기서 핵심 코드이다. 이 부분은 별도로 정리해 보기로 한다. n:m 과 1:m 의 관계 구성과 사용이 설정이 별로 없고 예제 또한 절절한 것들이 없다. 하지만  이런걸 꼭 사용하는 부분들이 있다.  user 와 role 구성 하는 부분이 있는데 이걸 sophisticated 하게 구현한 소스 예제가 없다. setRole,getRole, addRole 이런식으로 하는 예제가 없다.  이걸 한번 만들어야 할것 같다. 이 내용을 그대로 가져와서 하였다.  추가한 내용은 localhost 에서만 동작 하여 cor 부분 추가하였고 이번에 https 적용도 같이 추가 하였다. 결과물을 확인하기 위해 postman 으로 확인 하였는데  http 는 문제가 없지만  https 는 신뢰할수 없는 사이트라고 나오는 이슈가 있어 정상적으로 동작하지 않았다. 해결 방법은 그냥 설정해서 SSL  certificate verification option을 off 하면 된다. 이건 api 동작만 확인하기 위한 조치이며  client 사이트에서 해결하기 위해서는 다른 무언가를 해야 한다. 1. 도메인이 있는 경우  certbot 을 이용해 보는 것도 좋아 보인다. 꼭 도메인이 있어야 하고 설정도 해야 정상적으로 동작한다. 2. client 에 호출하는 놈이 있는데 그놈에 옵션을 주어서도 해결할수 있다.  3. restful server 에 proy server 를 붙여서 사용해도 된다. apache 나 nginx...

Xamarin IOS 실행 window 에서 실행하지 마세요. 안됩니다. 그냥 맥에 visual studio 2019 설치해서 하는게 정신 건강에 좋음

이미지
 Xamarin 을 window 에 설치해서 실행하는 것을 기준으로 하였을 경우 Android 는 쉽게 에뮬을 실행하여 확인 할 수 있다. 하지만 IOS 내용은 확인하기 위해서는 MACOS 가 있어야 하고  같은 네트워크에 있어야 한다. 맥에서 공유를 찾아서 실행하고  리모트 연결을 설정한 후에  연결을 시도하면 아래와 같이 나온다. 맥에 로그인 하는 아이디 / 패스를 그대로 사용해서 접속해야 한다. 처음 설치하면 뭐가 없다고 계속 설치하라고 나온다. 그냥 설치한다. 정식 가이드 문서는 아래 링크를 확인하기 바란다. Xamarin.iOS 개발을 위해 Mac에 페어링 - Xamarin | Microsoft Docs 정상적으로 연결이 되면 클립 형태로 연결된 것을 표시한다. 결론 mac 에 visual studio 2019 를 설치해서 하는게 정신 건강에 좋다. window 에서 android 만 확인 하시고  mac 을 확인하기 위해서는 mac 에 visual studio 2019 을 설치해서 실행하는것이 개발하기  편하다. 

xamarin webview javascript 적용

이미지
 xamarin 으로 webview 를 실행하면  javascript 가 동작하지 않는다. 그래서, 공식 사이트에도 hybridwebview 형태로 해서 설명을 하고 있다. 그리고, github 에도 예제가 있긴 하다. 그런데, 공식 사이트에도 그렇고 github 예제도 그렇고 빌드하고 run 되는 소스는 아니다. 답답하다.  돌아가는 소스가 있어야 그냥 가져와서 사용하지 이건 간단한거 하나 만드는 것도 어려워서 할수 가 없다. github에 있는 소스 https://github.com/mistrypragnesh40/HybridWebView 이 걸 그냥 받아서 실행했다. 안돌아 간다.  이유는 모른다. 그래서, 신규로 프로젝트를 만들어서 해당 소스를 하나씩 그냥 가져와서 적용했다. 돌아간다. 결과 화면이다. 코드 적용하는데 어려운 점은 왜 이렇게 적용해야 하는지 대해서 모르겠다는 것이다. 그냥 소스에 있는 내용 그대로 따라해서 동작만 하면 된다. android 에서도 webview 를 그냥 사용하지 않고 extension 해서 사용하니깐 그냥 그런가 보다 하고 사용하면 된다. 아이폰용도 동일하다 그냥 안돌아가니깐 신규로 만든 프로젝트에 해당 내용 적당히 붙여서 돌아가도록 하면 된다. 여긴 내가 만든 예제이다. 앞에 있는 github 랑 동일한데 돌아간다는 것이다. wkyoon/HybridWebViewExample (github.com)

Xamarin WebView 예제를 .NET MAUI로 다시 만들기

이미지
이 글은 2022년에 작성한 Xamarin.Forms WebView 예제를 2026년 기준으로 전면 개정한 글입니다. Xamarin 지원은 2024년 5월 1일 종료되었으므로, 기존 URL과 검색 의도는 유지하면서 현재 지원되는 .NET MAUI로 모든 예제를 다시 작성했습니다. Xamarin WebView 예제를 .NET MAUI로 다시 만들기 모바일 앱 안에서 웹 페이지를 표시하려면 WebView 를 사용할 수 있습니다. .NET MAUI의 WebView는 다음 세 가지 콘텐츠를 모두 처리합니다. 목적 사용할 소스 대표적인 용도 인터넷 페이지 표시 UrlWebViewSource 도움말, 공지, 웹 서비스 문자열로 만든 HTML 표시 HtmlWebViewSource 동적 안내문, 간단한 리포트 앱에 포함한 HTML 표시 로컬 파일 오프라인 도움말, 약관 이 글에서는 새 프로젝트를 만든 뒤 위 세 가지 방법을 구현하고, 로딩 상태·오류·뒤로 가기·외부 링크 제한까지 연결합니다. Xamarin.Forms 대신 .NET MAUI를 사용하는 이유 Microsoft의 Xamarin 지원은 2024년 5월 1일 종료되었습니다. Xamarin.Android와 Xamarin.iOS는 .NET for Android 및 .NET for iOS에 통합되었고, Xamarin.Forms의 후속 프레임워크는 .NET MAUI입니다. 기존 기술 현재 선택 Xamarin.Forms .NET MAUI 여러 플랫폼 프로젝트 단일 프로젝트 구조 플랫폼별 Effect/Renderer Handler 기반 사용자 지정 Xamarin.Forms WebView .NET MAUI WebView 기존 Xamarin.Forms 프로젝트를 유지보수하는 경우에도 보안 업데이트와 최신 Android·iOS 도구 지원을 위해 .NET MAUI 이전 계획을 세우는 편이 좋습니다. 예제 프로젝트 만들...