조대협의 블로그

안드로이드 채팅 UI 만들기 #2 나인패치 이미지를 이용한 채팅 버블 조대협 (http://bcho.tistory.com) 지난 글에서는 ListView를 이용하여 스크롤이 가능한 텍스트 기반의 간단한 채팅창을 만들어보았다.이번글에는 채팅 메세지에 이미지로 채팅 버블을 입히는 방법을 알아보도록 한다. 채팅 버블 이미지를 입히는 방법이나 원리는 간단한데, 채팅 메세지를 출력하는 TextView에 백그라운드이미지를 입혀서 출력하면 된다. 그런데 여기서 문제가 생기는데, 채팅 메세지 버블의 크기는 메세지의 글자수에 따라 가변적으로 변경되기 때문에, 일반적인 이미지를 백그라운드로 넣어서 가로로 늘이거나 줄이게 되면 채팅창이 이상하게 가로로 늘어날 수 가 있다.. (아래 그림에서 가로로 늘렸을때 말꼬리 부분 삼각..

안드로이드에서 ListView를 이용한 채팅 UI 만들기 조대협 (http://bcho.tistory.com) 안드로이드 프로그래밍 기본 개념이 어느정도 잡혀가기 시작하니, 몬가 만들어봐야겠다는 생각이 들어서 생각하던중에 결론 낸것이, 간단한 채팅 서비스, 기존에 node.js 하면서 웹용 채팅을 만들어보기도 했고, 찾아보니, 안드로이드용 SocketIO 라이브러리도 잘되어 있어서 서버 연계도 어려울것이 없을것 같고, 또한 메세지가 왔을때 푸쉬 알림을 써야 하는 등 이것저것 실습이 될것 같아서, 결국은 채팅으로 정했다. 서버나 연계 코드 구현보다, 가장 어려운게 역시나 UI 디자인과 프로그래밍인데, 가장 쉬운 방법으로는 ListView를 사용하는 방법이 무난하다. (결국 코딩을 하고 나니 여러가지 한계를..

빠르게 훝어보는 node.js#12 - Socket.IO (4/4)조대협 (http://bcho.tistory.com) 채팅 프로그램에 방(room/그룹)의 기능을 추가하기다음은 앞에서 만든 1:1 귓속말이 가능한 채팅에 “채팅방” 기능을 추가한 버전이다. var express = require('express'); var routes = require('./routes'); var http = require('http'); var path = require('path'); var app = express(); app.use(express.bodyParser()); app.use(express.cookieParser('your secret here')); app.use(express.session());..

빠르게 훝어보는 node.js#10 - Socket.IO (2/4)조대협 (http://bcho.tistory.com) Socket.IO APIsSocket.IO는 이밖에도 다양한 이벤트를 전달할 수 있는 API를 제공하는데, 이에 대해서 살펴보자.여기서 사용하는 socket이라는 객체는 io.sockets.on('connection',function(socket){에 의해서 callback function에 의해서 전달된 인자임을 미리 명시해둔다. 1. 이벤트 보내기 받기먼저 소켓으로 또는부터 이벤트를 보내고 받는 방법부터 알아보자.앞에 예제에서도 봤지만 가장 간단한 방법은 Ÿ * 이벤트 보내기 socket.emit('이벤트명',{메세지});현재 연결되어 있는 클라이언트 소켓에 “이벤트명”으로 “{메시..

빠르게 훝어보는 node.js#9 - Socket.IO (1/4)조대협 (http://bcho.tistory.com) 웹의 발전과 함께, 클라이언트의 요청에 대해서 응답만을 하는 단방향성이 아닌 양방향성의 웹 사이트가 유행하게 되었는데, Socket.IO는 자바스크립트 모듈로, 양방향 통신이 가능한 웹사이트를 구축하기 위해서 HTTP 클라이언트로 푸쉬 메시지를 보내줄 수 있는 모듈이다. 넓은 브라우져 지원성과 사용의 편의성 때문에 널리 사용되고 있고, node.js가 인기 있어 지는 이유 중의 하나는 socket.io 때문이 아닐까 한다.배경Socket.io를 설명하기 전에, 웹에서의 푸쉬 개념에 대해서 이해할 필요가 있다. 웹은 기반적으로 클라이언트에서 서버로 가는 단방향성이지만, 채팅과 같은 실시간 ..