프로젝트

socket.io 실시간 chat API 서버 (Node.js, Socket.io, Redis)

이전 포스팅을 봤을 때, node-multiroom-chat 레포지토리에 대한 내용만 기술하고, HJ커뮤니티에서 마무리 했던 ChatServer 레포지토리의 대한 내용을 기술하지 않아서 이번 기회에 포스팅 하게되었습니다. https://github.com/geun9716/ChatServer GitHub - geun9716/ChatServer: A Template ChatServer using socket.io, cluster, redis A Template ChatServer using socket.io, cluster, redis - GitHub - geun9716/ChatServer: A Template ChatServer using socket.io, cluster, redis github.com ..

ROPE 프로젝트

블로그를 열심히 시작한지 얼마 되지 않았는데 평소 어떤 페이지에 사람들이 가장 많이 방문했는가 통계를 보면 ROPE 프로젝트에 대해 관심이 많다. (아마 WebRTC를 구현하는 것에 관심을 많이 갖는데 이를 쉽게 구현하고 싶은 사람들이 많이 있는 것 같다.) 아무래도 방향성만 제시하고 끝까지 글을 쓰지 않은 것이 방문한 사람들에게 살짝 부끄러워 진다. 그래서 해당 글을 마무리 하고 싶어서 오랜만에 코드를 열어봤더니... OMG.... 정말 초창기에 아무것도 모를때 부딪히면서 만든 코드라, 구조도 없고 코드도 개판이고, 그래서 대대적인 수정을 통해 사람들이 잘 사용할 수 있도록 해보려고 한다. 이번 열정은 좀 오래 가기를 빈다...

2021 소프트 & 글미 연합 해커톤

이번 7월 29일부터 8월 1일까지 총 3일에 걸친 해커톤을 진행하였다. 혼자 4학년이고 나머지 팀원들이 2학년이었으며, 개발을 담당한 친구들은 다들 웹을 조금만 다루어 보았기 때문에, 걱정 되었지만, 애자일 정신으로 믿고, 잘 해보자! 라는 생각으로 접근했던것 같다. Front도 어느정도 할 줄 알아서, 잘 해결될 거라고 생각했지만, 생각보다 CSS에 큰 봉변을 당했으며, 디자이너가 있었기 때문에, 중요한 상황이었다. CSS bootstrap을 사용하지 않아서 발생했던 부분들이 꽤나 힘들었고, CSS에서 flex는 어느정도 사용할줄은 알았지만, 부모와 자식간의 어떤 속성을 써야 적용이 되고, position은 어떻게 적용이 되는가에 대해, 더욱 생각해 보게되는 일정이었다. 그리고 아쉬웠던 점은, 지속적..

socket.io 실시간 chat 구현 (react - Node.js) - (2)

다음은 앞서 설명했던 단계들이 socket.io에서 어떻게 구현되어 있는지를 알아보겠다. 클라이언트단은 React.js 서버단은 Node.js를 사용하였다. 1. 소켓 생성 : 클라이언트는 socket.io-client에서 server의 IP와 port를 넣고 변수를 생성하면 된다. 클라이언트 - socket() //./component/socket.js import React from 'react'; import io from "socket.io-client"; // import { SOCKET_URL } from "config"; export const socket = io('localhost:5000'); export const SocketContext = React.createContext(); ..

socket.io 실시간 chat 구현 (react - Node.js) - (1)

채팅과 같은 통신 시스템은 2가지 Protocol 방식으로 나뉘어 진다. 2가지 방식에 대한 자세한 설명은 다음을 참조하기 바란다.(https://roothyo.tistory.com/5?category=952607) 간단하게 설명하자면, TCP - 신뢰성 있는 통신을 제공 - UDP에 비해 시간이 더 걸림. - Stream 방식으로 통신 - smtp, http, ... UDP - TCP에 비해 지연시간이 거의 없음. 주로 반응속도가 중요한 시스템에 적용. - 신뢰성 있는 통신을 제공하지 못함. - DataGram 방식으로 통신 - 게임, 동영상, ... 등 실시간 채팅은 주로 TCP로 구성되며 위에 있는 메소드의 대한 각 설명은 다음과 같다. socket() : 소켓 생성 bind() : 소켓에 주소 할..

CI board 와 xampp 로컬 설정

CIboard를 localhost에서 돌리기 위한 방법이다. 1. 씨아이보드 로그인 후 소스 다운로드 (링크 : http://www.ciboard.co.kr/b/lite) 2. xampp 설치 및 실행 3. apache config 수정 - 다음 3개의 항목을 수정 Listen 80 AllowOverride none Require all denied DocumentRoot "C:/Users/geun/lite_3.0.4" 설치한 위치로 수정 3. /application/config/config.php의 base_url 경로 수정 $config['base_url'] = '' -> $config['base_url'] = 'http://localhost/'; 4. http://localhost/ 창 열고, 하라..

2. ROPE PROJECT(2)

우리 서비스의 핵심은 시험을 보는 동안의 화면 공유와 시험이 끝난 후 제출하는 답안과 시험을 보는 모습을 찍어둔 타임랩스 파일을 함께 올리는 것이다. openvidu 오픈소스를 통해 multi-user group call (screen share)를 사용하기 위해 방법을 찾아보았다. openvidu-tutorial(github.com/OpenVidu/openvidu-tutorials)를 통해 기능을 테스트하고 설계한 우리 서비스의 구조는 다음과 같다. 기본적으로 React Native를 학습해왔던 나와 React.js를 학습해왔던 팀원으로 구성된 팀이기 때문에 Front는 React.js를 사용하였다. (React native도 아는데 비슷하겠지 하고 생각했던 내 생각과는 다르게 복잡한 내용들이 많아서 ..

1. ROPE 프로젝트 (1)

벌써 시간이 많이 지났다. 사실 프로젝트팀명을 던질까말까? 라고 정한 것도 사실 포기할까 말까 고민을 많이 했다 ㅋㅋ 먼저 WebRTC에 대해서 알아 보았는데 1대1까지는 가볍게 구현할 수 있지만, 우리는 그룹 화면공유가 필요했다. 그룹콜을 사용하는 경우에는 MCU 또는 SFU 등의 서버를 가져야 한다고 들었다. 그러나 우리는 그런 서버를 만들만한 능력은 부족했기 때문에, 구글링을 더한 결과 janus, kurento 등의 MCU까지 구현된 오픈소스를 찾아보았다. 프론트를 react.js 를 사용할 생각이기에, java 기반인 kurento를 알아봤고, kurento 프로젝트를 하던 사람들이 openVidu에 대해서 알아보겠다. 'OpenVidu는 웹 또는 모바일 애플리케이션에서 화상 통화를 쉽게 추가 ..