세션 : 웹브라우저 별로 생긴다.
소켓 : 웹페이지 별로 생긴다.
emit -> 송신
on -> 수신
emit과 on을 할 때 이벤트명(플래그)과 함께 송수신.
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script> //소켓생성io.emit -> 전체방송
socket.emit -> 개별
io.to(DM_socketID).emit("newMsg", data);
--> 특정 아이디에게 귓속말
#서버에서 모두에게 보내는 거
io.emit("notice", '$(socket.id.slice(0,5))*****(socket.id)님이 입장하셨습니다.');
#클라이언트에서 받는거
socket.on("notice, (data) = > {
console.log(data);
});채팅
const express = require( 'express' );
const app = express();
const port = 9999;
const http = require( "http" ).Server( app );
const io = require( "socket.io" )( http );
app.set( "view engine", "ejs" );
app.set( "views", __dirname + "/views" );
app.get( "/", ( req, res ) => {
res.render( "socket" );
});
io.on( "connection", function( socket ){
// 클라이언트가 socket이
// 연결되면 최초로 이 안에서 작업을 한다.
console.log( "Socket connected" );
socket.emit("skcreated", {socketid : socket.id});
socket.on( "sendMsg", ( msg ) => {
io.emit("newMsg", {socketid : socket.id, msg : msg});
});
socket.on( "disconnect", function(){
io.emit("systemMsg", "누군가 나갔다!");
});
});
http.listen( port, () => {
console.log( "9999!" );
});<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
.everymsg {
color: red;
background-color: antiquewhite;
text-align: left;
}
.mymsg {
color: black;
background-color: yellow;
text-align: right;
}
.systemmsg {
color:blue;
background-color: aquamarine;
}
</style>
<script>
var socket_id;
var socket = io.connect(); //소켓 만들어서 연결해!
socket.on("connect", function() {
console.log("sever connected!");
});
socket.on("skcreated", (data) =>{
socket_id = data["socketid"];
});
function go(){
socket.emit( "sendMsg", document.getElementById( "chat" ).value );
$("#content").append('<p class="mymsg">' + document.getElementById( "chat" ).value + '</p>');
document.getElementById( "chat" ).value="";
$("#div1").scrollTop($("#content").height());
}
socket.on( "newMsg", function( data ){
if(socket_id != data["socketid"]){
$("#content").append('<p class="systemmsg">' + data["socketid"] + '</p><p class="everymsg">' + data["msg"] + '</p>');
$("#div1").scrollTop($("#content").height());
}
});
socket.on( "systemMsg", function( data ){
$("#content").append('<p class="systemmsg">' + data + '</p>');
$("#div1").scrollTop($("#content").height());
});
</script>
</head>
<body>
<h1> Socket View 파일입니다. </h1>
<div id="div1" style="height: 500px; overflow-y:auto;">
<div id="content"></div>
</div>
<input type="text" id="chat" placeholder="채팅 메세지 입력"> <button type="button" onclick="go();">버튼</button>
</body>
</html>
Front-end Engineer, Web Developer & UX/UI Design