생활코딩 | WEB1 부록 - 코드의 힘 : 채팅 기능 추가
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 HTML강의 청각장애인을 위한 자막
자 이번 시간에는 우리가 코드의 힘을 느껴 보는 시간으로
우리 그 웹사이트에 다가어 방문자와 채팅할 수 있는 기능을 추가하는 방법을 한번 살펴볼 겁니다
자 지금 보시는 것처럼 웹 사이트의 방문자가 들어왔을 때 여기에 이렇게
생긴 것이 뜨구요 이걸 클릭하면
우리에게 방문자가 채팅으로 말을 걸 수 있는 서비스를 붙여 볼 거에요
이런 것을 직접 만드는 것 굉장히 굉장히 어려운 드립니다
돈도 많이 들고요 여러 가지 기술 지식 경험 많은 것들이 필요한 것인데
우리는 요거를 무료로 루
예 그리고 그냥 코드만 추가 하는 걸 통해서 이런 엄청난 부품을 우리의
서비스의 합성할 수 있습니다
자 한번 살펴보시죠 자 이런 기능을 제공하는 서비스가 있어요
예 쳐 크 라고 하는 서비스인데요 음 발을 맞는지 모르겠어요
발음이 좀 어렵더라구요 그래서 2차 길항 구하는 서비스를 이용하면
여러분이 무료로 예
이런 엄청난 기능을 넣을 수 있습니다 자 로그인을 일단 하시고요
예 저는 로그인은 미리 해 놓은 상태에요
어 그러면 이렇게 생긴 화면 나올 겁니다 자 그 중에서
음 여기 보시면 요렇게 되어 있는 관리자 화면에서 클릭
자 그러면 보시는 것처럼 자 이렇게 이제 코드 라고 되있는거 보이시죠
자 여기 있는 코드 저도 잘 몰라요 무슨 내용인지 관심도 없습니다
그냥 여기에서 이렇게 생긴 코드를
우리의 웹사이트에 포함시키면
어 채팅 기능이 추가될 것입니다 라고 적혀 있는 거예요 자 복사 해서
저는 이 웹사이트의 제 끄트머리에 다가 바디
직전에 요 닫히는 마디 직전에 이렇게 내용을 추가했습니다
자 그 다음에 우리 웹사이트로 가서
웹페이지를 열면 아마 작동을 안할 겁니다 왜냐하면 지금 제가 주소가
보시는 것처럼 파일로 되어 있죠 즉 웹 서버를 통하지 않고 바로
0 겁니다 이렇게 하지만 되고 웹서버를 통 하셔야 되요
1 지점 0.0 점 일이나 로컬 호스트 나 또는 어떤 도메인이 있어야
됩니다
자 저는 딜 이제 2.0 첨 0.1 x 점
html 로 접속했을 때
여기에 보시는 것처럼 이렇게 생긴 화면이 되죠 그럼 잘 되는지 한번
확인해 봅시다
자전 화면에 두 개로 쪼개 있구요 왼쪽은
방문자에 화면 오른쪽 은 우리의 화면입니다
자 그러면 방문자가 이렇게 들어와서
여기 있는 요거 있죠 요거를 따 클릭하고
예 그 다음에 여기에서
아이 라고 하고 엔터를 치면
오른쪽에 우리의 관리자 화면에서 는 어떤 변화를 겪게 되는 지를 한번
보자구요
펜 토
그럼 보시는 것처럼 이렇게
예 딸랑딸랑 소리가 다 줘 전화가 오는겁니다
그럼 우리가 여기에서 툴 웨이 로 누가 전화를 한 거지 라고 하고 요렇게
눌러서
여기에 음
표 이끌 누르면
보시는 것처럼 이제 우리가 로그인을 로그인니라 전화를 받은 커져
말하자면 그 여기다 에 제가 엘로
보라고 이렇게 입력하고 엔터를 치면 보시는 것처럼 방문객은 헬로 라는
것을 실시간으로 볼 수 있습니다
그리고 빠이 안녕 그러면
예 우리도 바이 르 이렇게 하면 이제 통신이 끝나게 되는 거죠
사용자는 요걸 눌러서 채팅 종료를 하게 됩니다
예 이런식으로 그리고 그저 방문객이 에 대한 여러가지 정보들도
이 서비스를 통해서 알 수가 있어요
자 보시는 것처럼 우리가 직접 구현 한다.고 하면 굉장히 많은 노력과
시간이 필요한 이런 채팅기능을
우리는 단지 코드를 웹페이지에 삽입하는 것을 통해서 우리의 웹 서비스의
합성할 수 있다 라는 엄청난 힘을 우리게 어 코드를 통해서 가질 수 있게
되는 것이죠
여기까지 하겠습니다.
댓글 0개
등록된 댓글이 없습니다.