728x90
index2.js
var socket = io();
//최초 접속시 실행할 함수
socket.on("connect", function(){
var input = document.getElementById("test");
input.value="접속됨";
});
//전송함수
function send(){
//입력된 데이터를 가져옴
var message = document.getElementById("test").value;
document.getElementById("test").value="";
//소켓에 send이벤트와 데이터 전달
socket.emit("send", {msg: message}); //사용자 정의 send 이벤트
}
index_2.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">
<!-- app_2.js 추가부분 -->
<script src="/socket.io/socket.io.js"></script> <!-- 순서 바뀌면 실행되지 않음 -->
<script src="/js/index2.js"></script> <!-- socket.io를 사용해야 함 -->
</head>
<body>
<div id="main">
<input type="text" id="test">
<!-- /static/js.index.js send()호출 -->
<button onclick="send()">전송</button>
</div>
</body>
</html>
app_2
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_2.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이라는 이벤트가 발생할 경우
console.log("유저 접속됨");
socket.on("send", function(data){
console.log("전달된 메세지: ", data.msg);
});
socket.on("disconnect", function(){
console.log("접속 종료");
});
});
//서버 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 |