Category Archives: Javascript

실시간 차트 – 스무디(smoothie)

스무디(smoothie.js)를 사용하여 스트리밍 데이터에 대한 실시간 차트를 그려보자.

실시간 차트가 무엇인지 먼저 보고 싶다면, 아래의 링크를 보자.

http://smoothiecharts.org/examples/example1.html

스무티 차트(Smoothie Chart)는 실시간으로 라인 차트를 부드럽게 표시할 수 있는 라이브러리로, 사용법이 매우 간단한다.

먼저 smoothie.js를 다운로드 하여 자신의 웹 프로젝트로 추가하자.

smoothie.js를 자바스크립트에 포함한다

canvas 객체를 생성한다

canvas에 SmoothieChart 객체를 연결한다

데이터를 추가한다

TimeSeries.append(timestamp, value)

  • timestamp
    데이터를 표시할 시간(X축)
  • value
    데이터의 값(Y축). 임의의 숫자값.
    value의 최소값과 최대값을 기반으로 차트를 자동으로 축소/확대한다.

지연시간 추가

지금까지 만든 차트에는 약간의 문제가 있다. 다음 번 데이터의 값을 알기 전까지는 차트에 표시할 수 없다. 따라서 차트가 연속적으로 움직인다기 보다는, 약간 점프하는 것 처럼 보인다.

이 문제를 해결하기 위해, 차트에 약간의 지연시간을 추가하자. 따라서 라인을 다음 번 데이터가 전달된 후 라인을 그리도록 만들어 보자.

지연 시간은 SmoothieChart.streamTo()를 호출할 때 추가할 수 있다.

색깔 지정하기

스무디는 라인과 배경의 스타일을 변경할 수 있는 API 또한 제공한다.

실행하기

여기에서는 표시할 수 없지만. 실행 해보면 아래와 같은 차드가 움직이는 것을 확인할 수 있다.

smoothie

 

[번역] node.js를 활용한 실시간 채팅 프로그램

이 글은 총 2개의 시리즈로 구성된다.

각 글은 michael mukhin님의 블로그 글을 바탕으로 번역에 옮겼다.

node.js와 socket.io를 활용한 단일 방 채팅 튜토리얼

역주) 최신 버전의 모듈을 사용하도록 소스 코드 일부를 약간 수정했습니다.
나는 얼마전 node.js 문서가 이제 충분히 사용가능하다는 사실을 알게 되었다. 그리고 node.js 전문가가 되어, node.js 커뮤니티에서 입문자를 도울 수 있기를 간절히 바래왔다. 이러한 열망이 있었기에, 더 빨리 node.js를 익힐 수 있었고, 또 필요한 기술을 공유할 수 있는 정도가 되었다.
나는 node.js, socket.io, express 모듈을 사용해서 한 개의 채팅방만이 있는 매우 간단한 채팅 클라이언트를 개발했다.
수정사항> 이제 node.js를 설치하기 위해 아래의 절차를 따를 필요는 없다. 지금은 단순히 .msi 파일 또는 .pkg 파일을 다운로드하여 간단히 설치할 수 있으며, NPM까지 모두 포함되어 있다.

http://nodejs.org/#download

역주> 소스코드로부터 직접 설치하시려는 분은  “node.js 맥에 설치하기“을 참조해도 된다.

먼저 node.js와 npm, 그리고 의존성이 있는 모듈을 설치해야 한다.

역주> npm 설치하는 마지막 명령문은 루트 권한이 필요할 수도 있다. sudo를 이용하라

끝! node, npm이 모두 설치되었으니, 이제 얼마드지 코딩을 시작할 수 있다. 좀더 쉽게 개발하려면, npm을 이용해서 express와 socket.io 모듈을 설치하자. 이 예제 프로젝트를 위한 디렉토리를 하나 생성한 후, package.json이라는 이름의 파일을 금방 만든 디렉토리에 만들자.

아래는 single-chat/package.json 파일 내용이다.

이제 필요한 모듈을 설치하자.

이제 서버 파일을 만들자. 이름은 app.js라고 짓자.

 

클라이언트 파일은 index.html 이라는 이름으로 아래와 같이 만든다.

서버를 실행하자

브라우저에서 http://localhost:8080으로 접속한다.

node.js와 socket.io를 활용한 멀티 방 채팅 튜토리얼

이제 앞서 만든 채팅 프로그램을 다수의 방을 생성할 수 있도록 수정하고자 한다.
이전 예제에서는 socket.io를 이용하여 메시지/브로드캐스트 정보를 어떻게 전송하는지에 대한 설명을 빠뜨렸다. 아래 코드는 해당 모듈을 정의했다고 가정한다.

서버는 socket 콜백을 사용하여 클라이언트 소켓으로만 전송할 수 있다.

서버는 해당 클라이언트 소켓만 제외한 모두에게 전송한다(즉 메시지를 브로드캐스팅한다).

서버는 전역으로 전송한다.

io는 socket.io 모듈을 통해 초기에 정의했고, 모든 소켓으로 전송할 수 있다.
역주) socket.broadcast.emit()과 io.sockets.emit()은 언뜻 보기에는 같아 보일 수 있지만 약간의 차이가 있다. 예를 들어 앞선 단일 룸 예제의 경우, 서버 프로그램인 app.js 파일의 adduser 리스너를 보자.

사용자가 채팅 방에 입장할 때 adduser 리스너 함수가 실행된다. 이때 기존에 입장했던 클라이언트의 경우 ‘[신규 사용자] has connected’라고 메시지 창에 알려주어야 한다. 반면 이번에 새로 입장하는 클라이언트에게는 이 메시지를 전달할 필요가 없다. 그래서 이 경우에는 socket.broadcast.emit()을 사용했다. 반면, 사용자 목록을 업데이트 처리는 모든 클라이언트가 실행해야 하므로, io.sockets.emit()을 사용했다.

최신 버전의 socket.io에서는 여러개의 룸(room)/그룹(group)을 허용한다. 예를 들어 클라이언트는 룸에 입장하거나 떠날 수 있다.

특정 룸에 접속한 클라이언트에게만(물론 지금 접속한 클라이언트를 제외한) 정보를 브로드캐스팅하려면,

특정 룸에 접속한 모든 클라이언트에게 정보를 전역으로 전송하려면

와 같이 사용한다.

이번 예제에서는 사용자가 접속하여 username을 입력하면 기본적으로 room1에 입장하도록하며, 클라이언트가 접속한 룸(room1)에만 브로드캐스팅하도록 새로운 app.js를 만들려고 한다. 또한 입장 가능한 룸 목록(room1, room2, room3)을 추가하고, 사용자의 현재 룸을 보여줄 수 있도록 룸 목록을 갱신하는 함수를 추가하려고 한다.
사용자가 룸을 변경학자 한다면, 클라이언트측에서는 switchRoom 함수를 호출한다. 서버에서는 이 함수가 호출되면, 사용자의 현재 소켓에 대해 현재 룸을 떠나고, 새로운 룸에 입장하도록 알린다. 그리고 사용자의 현재 위치를 브로드캐스팅하고, 룸 목록을 업데이트 한다.
아래는 변경된 app.js다.

 

 

아래는 변경된 index.html 파일이다.