20230802(수)_ Socket Io 구현

금일 달성 항목

1) Sockt io 구현

2) SQL 특강 수강

---

문제 해결 과정 1 - Soket io 를 찾을 수 없음

[문제]

소켓 io가 404 오류가 반복되어 들어와서 해결해야하는 상황이었습니다.

 

[시도]

디버깅을 해보니 처음에는   name: nickname.value, 영역에서 name이 들어오지 않고있었습니다.

"use strict";
const socket = io();

const nickname = document.querySelector("#nickname");
const chatList = document.querySelector(".chatting-list");
const chatInput = document.querySelector(".chatting-input");
const sendButton = document.querySelector(".send-button");
const displayContainer = document.querySelector(".display-container");

chatInput.addEventListener("keypress", (event) => {
  if (event.Keycode === 13) {
    send();
    chatInput.value = "";
  }
});

function send() {
  const param = {
    name: nickname.value,
    msg: chatInput.value,
  };
  socket.emit("chatting", param);
}

sendButton.addEventListener("click", send);

 

[해결]

확인해보니 오타가 있어서 name 명령어가 들어오지 않았던 것이라 수정하였더니 해결했습니다.

const chatInput = document.querySelector(".chatting-input");

또한 또 다른 오류가 생겼습니다. 

 

소켓 io가 구동되지 않는 오류였는데 확인해보니 혹시 몰라 cdn 에서 제공해주는 소켓io를 중복해서 넣어놨는데 이게 문제였습니다.

https://cdnjs.com/

cdnjs - The #1 free and open source CDN built to make life easier for developers

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js" integrity="sha512-jMNwWSmjje4fjYut9MBGKXw5FZA6D67NHAuC9szpjbbjg51KefquNfvn4DalCbGfkcv/jHsHnPo1o47+8u4biA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

이 부분을 삭제하고 index.js에 node_modules에 포함되어있는 소켓 io를 불러오니 잘 해결되었습니다.

    <script src="/socket.io/socket.io.js"></script>

 

 

[알게된 점]

꼼꼼하게 코드를 작성해야한다는걸 다시 한번 명심하게 되었습니다.