예제 구현해보기 - Try1

우선 처음부터 따라 구현 해 봤다.

yarn init //package.json 만드는 명령어

yarn init 다음에 question name 등등 나오는데

귀찮으면 yarn init —force 넣으면 된다고 한다.

yarn create 프로젝트이름 //여기서 계속 에러가 났다.

알고보니까 내가 잘못 친 거 였다.

yarn create react-app 프로젝트이름 //이렇게 쳐야 한다.

나는 프로젝트 이름을 rtc-socket-connector-try로 지었다.

실행 된 프로젝트에서 필요없는 부분을 다 지웠다.

다 지우고 나니 이런 모습이 되었다.

package.json이 두 개 생겨버렸다.

지우고 처음부터 다시 해봐야겠다.

---

Try2

yarn create react-app 프로젝트이름

을 사용해서 다시 프로젝트를 만들었다.

자동 생성 된 애들 다 지워버리고

src/data-channel.html 만들어서 클라이언트 먼저 제작 해 봤다.

우선 간단하게 연결 되는지 알아보려고

package.json에서 scripts안에 “start:data-channel” : “parcel src/data-channel.html watch” 따라 입력했는데

'parcel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프
로그램, 또는
배치 파일이 아닙니다.
error Command failed with exit code 1.

이런 에러가 떴다.

그래서 parcel를 설치 해 줬다.

yarn global add parcel-bundler

두근두근

제대로 동작 한다.

이제 원래 example코드의 html 내용은 다 입력해놓고 다음 코드를 실행 해 보자.

html 코드 내용 입력 완료. css에서 꼭 필요하지 않은 부분은 빼고 적었다.

이제 data-channel.ts를 작성 해 보자.

우선 import부분 빼고 main함수 부터 적어봤다.

우선 현재 창의 socket id를 나타내는 부분 빼고는 data-channel.html에 있는 id를 가진 요소들의 값을 받아와서 변수로 설정 했다.

그 뒤에는 socket.io 서버와 연결 했다.

import {io} from "socket.io-client";
const socket = io("http://localhost:5000");

“socket.io-client”부분에서 빨간 줄이 떴지만,

npm link socket.io

로 해결했다.

socket io사용하기

뜬금없는데 이거로 공부하자. 좀있다 읽어보자.