728x90
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="/css/index.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index3.js"></script>
</head>
<body>
<div id="main">
<input type="text" id="test">
<!-- /static/js.index.js send()호출 -->
<button onclick="send()">전송</button>
</div>
</body>
</html>
js
var socket = io();
//최초 접속시 실행할 함수
//최초로 접속할 때 connect라는 이벤트가 발생
socket.on("connect", function(){
//이름을 입력 받을 부분
var name = prompt("반갑습니다. 이름을 입력하세요", "");
//이름이 빈칸인 경우
if(!name){
name = "익명"
}
//유저 입장 전체 알림
socket.emit("newUser", name);
});
//update 시 자료 출력(임시 확인용)
socket.on("update", function(data){
console.log(`${data.name}: ${data.message}`);
})
//전송함수
function send(){
//입력된 데이터를 가져옴
var message = document.getElementById("test").value;
document.getElementById("test").value="";
//소켓에 send이벤트와 데이터 전달
socket.emit("message", {type: "message", message: message}); //사용자 정의 send 이벤트
}
app
const express = require("express");
const socket = require("socket.io");
const http = require("http");
//Node.js 기본 내장 모듈 로딩****************
const fs = require("fs") //FileSystem 모듈
//******************************************
const app = express();
const server = http.createServer(app);
const io = socket(server);
app.use("/css", express.static("./static/css"));
app.use("/js", express.static("./static/js"));
app.get("/", function(req, res){
console.log("유저가 /로 접속함");
fs.readFile("./static/index_3.html", function(error, data){
if(error){
res.send("에러 발생")
} else {
res.writeHead(200, {"Content-Type" : "text/html"});
res.write(data);
res.end();
}
});
});
io.sockets.on("connection", function(socket){
//connection이라는 이벤트가 발생할 경우
socket.on("newUser", function(name){
console.log("서버");
console.log(name + "님이 접속하셨습니다.");
//소켓에 이름 저장
socket.name= name;
//모든 소켓에 전송
io.sockets.emit("update", {
type:"connect",
name: "SERVER",
message: name+"님이 접속하셨습니다."
});
});
socket.on("disconnect", function(){
console.log(socket.name + "님이 나갔습니다.");
//나가는 경우, 나머지 유저에게 메세지 전송
socket.broadcast.emit("update", {
type: "disconnect",
name: "SERVER",
message: socket.name+"님이 나가셨습니다."
});
});
//전송된 메세지 받기
socket.on("message", function(data){
//받은 데이터에 전송자 이름 알아내기
data.name = socket.name;
console.log("message이벤트: ", data);
//보낸 사람을 제외한 나머지 유저에게 메세지 전송
socket.broadcast.emit("update", data);
})
});
//서버 8081포트로 listen
server.listen(8081, function(){
console.log("서버 실행중...");
});
'단순 코드 기록 > Node' 카테고리의 다른 글
| Node_채팅 화면 만들기 (0) | 2024.03.28 |
|---|---|
| Node_소켓통신 적용 (0) | 2024.03.27 |
| Node_소켓통신에서 HTML, CSS, js파일 사용 (0) | 2024.03.27 |
| Node_소켓통신을 이용한 서버 가동 (0) | 2024.03.27 |
| Node_Template 사용 + Update (0) | 2024.03.26 |