이근둥
근둥이의 블로그
이근둥
전체 방문자
874,952
오늘
323
어제
187

공지사항

  • 전체보기 (107)
    • 웹 (9)
    • 언어 & 프레임워크 (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • React Native (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • 컴퓨터 과학 (3)
      • 알고리즘 (0)
      • 자료구조 (3)
    • 기타 (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • 일상 (13)
      • 게임 (13)
    • 칼럼 (9)
      • 회고 (0)
      • 나만의 글 (0)
      • 제품 리뷰 (9)
    • __Dev__ (9)
      • Release (9)
반응형

인기 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • [Tomcat] 아파치 톰캣 서버 포트 변경하기
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포트 변경하기
  • [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
  • [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
    2017.12.19
    [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

태그

  • Deemo
  • WWDC
  • 자바
  • 출간
  • 이펙트
  • ES6
  • 이클립스
  • composition-api
  • Java FX
  • AstroWar
  • pwa
  • self
  • Hello World!
  • 프로그레시브 웹 앱
  • vue-next
  • Composition API
  • javascript
  • Scanner
  • spread syntax
  • vue
  • WWDC20
  • Vue 3
  • vue.js
  • 파티클
  • 자바 프로젝트
  • 전개 구문
  • vuex
  • vue3
  • 웹 확장
  • java

최근 댓글

  • 어디에서도 이런 친절한 설명은 받을 수 없었습니다. 응용⋯
    미쳤다...
  • 정말 너무 감사합니다 선생님 많은 도움이 되고있습니다 어떻⋯
    김준태
  • 커서 위치이동 함수까지 했는데 컴파일하면 Makefile.⋯
    Qour94
  • iOS의 경우 애플에서 개발하고 있는 webkit 엔진을 ⋯
    이근둥
  • android, IOS에서 된다고 했는데 Notifica⋯
    삽자루부대

최근 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • 스택(Stack)
    2022.05.26
    스택(Stack)
  • 배열(Array)
    2022.05.25
    배열(Array)
  • C언어로 배우는 자료구조
    2022.05.24
    C언어로 배우는 자료구조
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
hELLO · Designed By 정상우.
이근둥

근둥이의 블로그

[Node.js] 실시간 채팅 서비스 만들기(4) - Socket.io 기초
언어 & 프레임워크/Node.js

[Node.js] 실시간 채팅 서비스 만들기(4) - Socket.io 기초

2018. 5. 30. 17:41
반응형

안녕하세요!



이번 강좌에서는 지난 포스팅에 이어서

Socket.io를 이용한 실시간 데이터 송/수신을 구현해보도록 하겠습니다!




[목차]


1. 서버 코드 작성

2. HTML 수정

3. 클라이언트 자바스크립트 생성

4. 클라이언트 코드 작성

5. 테스트





먼저 코드의 소스코드를 작성해줍니다.



server.listen 위에다가 위 처럼 작성해주세요!


on()은 소켓에서 해당 이벤트를 받으면 콜백함수가 실행됩니다!


io.sockets.on('connection' function(socket)...)


부분은 connection 이라는 이벤트가 발생할 경우 콜백함수가 실행됩니다.



io.sockets 는 접속되는 모든 소켓들을 의미하구요


접속과 동시에 콜백함수로 전달되는 소켓은 접속된 해당 소켓 입니다.

io.sockets.on('connection' function(socket)...)


콜백함수 안에서 해당 소켓과 통신할 코드를 작성하시면 됩니다!


socket.on('send', function(...))

socket.on('disconnect', function(...))


위의 2기능을 가진 코드가 있는데요


첫 번째는 send 라는 이벤트를 받을경우 호출이 됩니다.

두 번째는 disconnect인데 socket.io 기본 이벤트입니다!


연결되어있던 소켓과 접속이 끊어지면 자동으로 실행이 됩니다.



기본 이벤트(connection, disconnect 등)을 제외하고 여러분들이 원하는 이벤트 명을 지정하여 통신도 가능합니다!


위 코드에서 send 이벤트는 제가 정의한 이벤트입니다.



서버측 코드는 마무리 되었습니다.



index.html을 수정해줍니다.



위와 똑같이 해주세요!


index.html




다 마무리 하셨으면 js 폴더에 index.js 파일을 생성해줍니다.



위와 같이 코드를 작성해주세요!


index.js



클라이언트에서는 connection 이벤트가 아니라 connect 입니다!


위 코드를 설명드리자면



먼저 서버와 소켓이 연결되었을 때 id가 test인 요소의 값을 '접속 됨' 으로 설정합니다.


아래의 send 함수는 버튼을 클릭했을 때 호출이 되는데요

id가 test인 요소의 값을 서버로 전송하는 코드입니다!


중요한점은 socket.emit('send' ...) 이벤트 명입니다! 


on은 수신, emit은 전송이라고 이해하시면 되는데요


send라는 이름의 이벤트를 전송했으면 받는곳에서는 on('send') 가 있어야 받을 수 있습니다.


이벤트명이 동일한것 끼리만 데이터 송/수신이 가능합니다!



만약 전송하는 부분에서는 emit('aa')라고 코드를 작성했는데

수신하는 부분에서 on('abc') 라고 한다면 전달 받을 수 없습니다.


이벤트명은 송/수신측에서 모두 동일해야합니다!





모두 작성을 하셨으면 저장하신 후 서버를 실행시켜봅시다




서버 실행 후 접속해보면 바로 '유저 접속 됨' 문자가 콘솔에 찍히는것을 확인하실 수 있습니다.



그리고 클라이언트도 확인해보시면 아래와같이 바뀌었을겁니다.

원상태는 빈 칸 이지만, 클라이언트 측의 connect 이벤트가 수신되고 id가 test인 요소의 값을 '접속 됨'으로 변경하였기 때문에

위와같이 값이 추가되었습니다.



원래있던 내용을 지우고 전송버튼을 눌러봅시다



(버튼을 누르면 위에서 작성한 send 함수가 호출되고 입력한 데이터가 서버로 전송됩니다)





서버의 콘솔을 확인해보시면 정상적으로 데이터가 전달되는 모습을 보실 수 있습니다!






Socket.io로 실시간으로 데이터를 송/수신하는 예제를 작성해보았습니다!



채팅은 오늘 진행한 내용의 응용이므로 크게 어렵지 않습니다!




오늘 진행한 내용은 아래에 모두 저장되어있습니다.


https://github.com/leegeunhyeok/node-chat/tree/chapter_4






다음 시간에는 UI를 꾸미고 채팅 기능을 구현해보도록 하겠습니다!


감사합니다.

반응형
저작자표시 비영리 동일조건
    '언어 & 프레임워크/Node.js' 카테고리의 다른 글
    • [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅 기능 구현
    • [Node.js] 실시간 채팅 서비스 만들기(3) - 정적 파일 제공
    • [Node.js] 실시간 채팅 서비스 만들기(2) - 서버 실행
    • [Node.js] 실시간 채팅 서비스 만들기(1) - 준비
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기

    티스토리툴바