일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 이슈
- next.js
- TypeScript
- 웹
- 자바스크립트
- 알고리즘
- JavaScript
- AWS
- 쿠버네티스
- 프론트엔드
- HTML
- k8s
- kubernetes
- 컴퓨터공학
- 이더리움
- react
- 타입스크립트
- 리액트
- node.js
- 클라우드
- BFS
- 가상화
- 백준
- es6
- 파이썬
- CSS
- 블록체인
- docker
- 백엔드
- 솔리디티
- Today
- Total
목록socket.io (2)
즐겁게, 코드
서버 편 과 이어지는 글로, 클라이언트 제작 과정을 여기서 정리하려 했지만 너무 분량이 길어져 중요한 부분만 짚기로 하였습니다. 전체 서버 & 클라이언트 코드는 아래 깃허브 저장소 링크에서 확인할 수 있습니다. C17AN/react-socket-chat socket.io와 리액트를 활용한 채팅 어플리케이션. Contribute to C17AN/react-socket-chat development by creating an account on GitHub. github.com 이 글에서는 리액트 클라이언트에서 socket.io-client를 활용하는 팁만을 다룹니다. 1. 클라이언트와 서버 연결하기 - 언제나 훅을 사용하자 클라이언트에서는 socket.io-client에서 불러온 객체를 활용해 서버와 연결..
socket.io를 활용하면 사용자간 실시간 양방향 통신 어플리케이션을 만들 수 있습니다. 오늘은 socket.io / Express / React 스택을 활용해 채팅 어플리케이션을 제작해 보도록 하겠습니다. [제작할 기능] - 방, 유저네임 설정 - 방 입장 시 유저 입장 알림 - 유저간 채팅 - 방 퇴장 시 유저 퇴장 알림 1. 디펜던시 설치 - npm 또는 yarn을 활용해 먼저 express 와 socket.io 를 설치해줍니다. npm i express socket.io // 또는 yarn add express socket.io 2. 코드 작성 이후, server.js 파일을 생성하고 다음과 같이 코드를 작성합니다. // server.js const express = require("expres..