[특수개발?] 채팅 프로그램 개발2

안녕하세요. @u robotics 입니다.
어제는 잠이 와서 채팅 프로그램을 그냥 끝내버렸는데요.
(헐 벌써 이틀 전인가 ㅇ_ㅇ;;;;)
암튼, 오늘 이어서 계속 해보도록 하겠습니다. ㅎㅎㅎ

처음 보시는 분은
어제 글을 참조해주세요.

[특수개발?] 채팅 프로그램 개발
https://steemit.com/kr/@urobotics/4djxwh

여기서 기본 셋팅이 되셨으면
이제 진행을 해봅시다.

(기본적으로 참고???(베낌?) 하는 사이트는
socket.io 입니다.)

socket폴더 안에 다가
html 파일을 하나 만듭니다.
이름은 index.html로 해주세요.

그리고 내용은

이 내용을 복사 붙여넣기 해주시면 됩니다.

그리고 어제 js 파일에서
조금 변경을 합니다.

요부분만 바꿔주세요.
app.get 부분을 바꿔주시면 됩니다.

그리고 터미널에서
node server를 실행주시면 이 화면이 뜹니다.

짜잔, 드디어 채팅 화면이 떴습니다.

그런데 ㅇ_ㅇ 아무리 뭔가 입력하더라도
입력이 되지 않습니다. ㅎㅎㅎㅎ

그래서 좀더 만들어봐야 됩니다.

다시 터미널에서 npm install --save socket.io

server.js를 그대로 교체해주세요.

index.html을 열어주시고요.

body위에 이 내용을 복사 붙여넣기 해주시면 됩니다.

그럼 이제 터미널에서 node server 를 해주고,
인터넷을 띄워서 주소창에 localhost:3000
이렇게 써주세요.

주소창에서는 똑같은 내용이 나오지만
터미널에 보면
접속되었습니다. 하고 뜹니다.
(a user connected)

그러면 이제 메시지를 주고 받고를 해봅시다.

index.html 파일로 가서요.
스크립트 부분을 바꿔넣어줍니다.

그리고 server.js 에서
io부분을 바꿔줍니다.

터미널에서
node server
를 입력하시고요.
인터넷 주소창에 localhost:3000
을 입력하세요.

그러면 채팅 창이 또 뜨는데요.
이번에는 입력한 다음 엔터를 눌러보세요.

다시 터미널로 돌아가보시면

네. 여러분이 입력한 메시지가
드디어 출력되고 있습니다. ㅎㅎㅎㅎ

이제 마지막으로(?)
브로드캐스팅을 하고 끝내겠습니다.
(모두에게 말하기)

이부분 복사하셔서
server.js의
io.on에 넣어주시면 됩니다.

io의 의미는 모두에게 이고요.
on은 듣는다.
emit은 말한다. 입니다.

그 다음에
마지막에 index.html을 수정해보죠.

복사하셔서
script 부분에
붙여넣어주시면 됩니다.

마지막으로
터미널을 여셔서
node server를 입력해주세요.

그리고 인터넷 주소창에
localhost:3000
을 입력하시면

이제 채팅을 하고
엔터를 치면 메시지가 쌓입니다.

여러분도 잘 쌓이실 것 같네요. ㅇ_ㅇ?? 그런가요?
담엔 뭘 개발할지 고민입니다. ^^

재밌는 거 개발해볼려고요.
감사합니다. ^^ ㅎㅎㅎ

[특수개발?] 채팅 프로그램 개발
https://steemit.com/kr/@urobotics/4djxwh