반응형 프로그래밍/node.js9 (node.js) node.js+socket.io를 통한 간단한 실시간 아이디어 보드 node.js+socket.io를 통한 간단한 실시간 아이디어 보드 원래 JSP 수업이여서 spring으로 하려고했는데... spring으로 하기에 시간이 없었기 때문에 간단하고 빠르게 만들 수 있는 node.js에 외부 라이브러리인 socket.io 를사용하여 아이디어 회의 보드를 만들었습니다. 한쪽이 어떤걸 하면 다른쪽에서 똑같이 보여지는 (어찌보면 미러링과 같은) 역할을 합니다. 1. 전체적인 인터페이스 : 전체적인 인터페이스는 보이는 화면과 같습니다. 2. 채팅과 캔버스 기능 : 왼쪽 위 캔버스와 오른쪽 상단으로 이동할 수 있는 채팅으로 서로 대화하는 모습입니다. 3. youtube(동영상 기능) : 상대방에게 보여주고 싶은, 아이디어 참고가 될만한 YOUTUBE 영상을 url형식으로 붙여넣기 하.. 2018. 12. 4. (node.js) herokuapp 쓸 때 주의사항, 오류해결 Herokuapp 을 쓸 때 1. 포트가 3000인지 확인2. 위와 같이 process.env.PORT 적어줬는지 확인! 3 at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hackaton-prototype.herokuapp.com request_id=6a2e325d-37aa-4eed-a474-838ddaf38039 fwd="61.99.145.58" dyno= connect= service= status=503 bytes= protocol=https 이런 오류가 발생할 때 여기서 method=GET path="/favicon.ico" 2018. 12. 4. WebStorm 사용하기, node.js 기본 파일 역할 WebStorm WebStorm 다운받기 https://www.jetbrains.com/webstorm/ WebStorm: The Smartest JavaScript IDE WebStorm is a lightweight yet powerful JavaScript IDE, perfectly equipped for client-side development and server-side development with Node.js. www.jetbrains.com webstorm 을 이용하여 node.js 기본 파일을 생성하면 이렇게 자동으로 모든 기본 디렉토리와 모듈들을 설치해줍니다. 전 시간에는 이걸 일일이 npm install을 사용해서 연결해줬었는데 webStorm에서는 시작하자마자 모든걸 생성해주네요.. 2018. 12. 4. (Node.js 예제) 접속할 때마다 count 하기 Count 예제 사이트를 들어갈 때마다 count를 띄워 1씩 올라가는 예제를 해보겠습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ? var socket=io('http://localhost:5000'); socket.on('users.count', function(number) { document.getElementById('users-count').innerHTML=number; }); Colored by Color Scripter cs socket의 변수를 생성하고 socket.on으로 이벤트가 들어오면 즉각적으로 바뀔 수 있게 합니다. 변수가 들어오는 function(number)의 number가 count부분이 됩니다. document.getElement.. 2018. 12. 4. 이전 1 2 3 다음 반응형
