socket.io
app.js (서버)
// ------------------1-----------------
// 여기가 서버가 됩니다.
// express 라이브러리 가져와서 변수 선언
// require 하면 자동으로 node.modules를 바라봅니다.
const express = require("express");
const app = express();
const path = require("path");
// console.log("dirname이 뭘까요", __dirname);
// ------------------6-----------------
// socket io의 코어 모듈 http 가져오기, 5번에 server.listen 으로 변경
const http = require("http");
const server = http.createServer(app);
// ------------------7-----------------
// socket io 선언
const socketIO = require("socket.io");
const io = socketIO(server);
// ------------------2-----------------
// path join으로 운영체제별 경로 탐색 다른 경우 관리
// app.use()는 모든 요청에 미들웨어를 실행
app.use(express.static(path.join(__dirname, "src")));
// ------------------3-----------------
// port 설정
const PORT = process.env.PORT || 5000;
// ------------------8-----------------
// socket.io 라이브러리 사용하겠습니다. -> html 로 이동
// ------------------9-----------------
// 서버에서 받아주는 코드를 입력해줍니다.
io.on("connection", (socket) => {
console.log("연결 완료");
socket.on("chatting", (data) => {
console.log("data확인", data);
// io.emit("chatting", `서버에서 보내는 메시지 : ${data}`);
// ------10-----------
// 반환 값 조정
io.emit("chatting", data);
});
});
// ------------------4-----------------
// index.html 생성 후 돌아오기
// ------------------5-----------------
// port 열고 web에서 확인,
// nodemon 설치 (자동 서버 재실행) = `npm install -g nodemon` => nodemon app.js
// app.listen(PORT, () => console.log(`sever is running ${PORT}`));
server.listen(PORT, () => console.log(`sever is running ${PORT}`));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 4 html 구성 -->
<div class="user-container">
대화명 : <input type="text" id="nickname">
</div>
<div class="display-container" id="scroller">
<ul class="chatting-list" id="anchor"></ul>
</div>
<div class="input-container">
<input type="text" class="chatting-input">
<button class="send-button">보내기</button>
</div>
<!-- 1 -->
<!-- <h1> 쉽지 않구먼 </h1> -->
<!-- 2 콘솔 켜놓고 새로 고침으로 에러 없는 지 확인 -->
<!-- 3 chat.js 만들고, 콘솔 찍어서 연결 확인 -->
<script src="/socket.io/socket.io.js"> </script>
<script src="js/chat.js"></script>
</html>chat.js (클라이언트)
//-1 연결 확인 여기가 클라이언트 입니다.
// console.log("chat.js 연결");
//-2 연결확인 2차, 새로고침, emit("채널이름", 내용), app.js서버에서 받아주는 코드 입력
"use strict";
const socket = io();
console.log("소켓확인", socket);
// socket.emit("chatting", "문자 보내기 예시");
//-4 셀렉팅 + 메시지 보내는 이벤트 추가
const nickname = document.querySelector("#nickname");
const chatList = document.querySelector(".chatting-list");
const chatInput = document.querySelector(".chatting-input");
const sendButton = document.querySelector(".send-button");
sendButton.addEventListener("click", () => {
const param = {
name: nickname.value,
msg: chatInput.value,
};
socket.emit("chatting", param);
});
//-3 다시 돌아와서 chat.js 에서도 통신 받아주는 내용 추가, 오키 기본 구현 완료 html 구성 시작
socket.on("chatting", (data) => {
// console.log("서버에서 보낸 메시지 확인", data);
//-5 받아 오는 데이터 정리 그리고 여러 브라우저 통신 확인
// 이제 끝났고 라이브 서버로 열어서 html/css만 수정하면 되겠습니다.
const li = document.createElement("li");
li.innerText = `${data.name}님이 - ${data.msg}`;
chatList.appendChild(li);
const huh = document.getElementById("scroller");
console.log("허쩜 스크롤항이트", huh.scrollHeight);
huh.scrollTop = huh.scrollHeight;
});
의미 없는 코드는 없다.