import React from 'react';
const Event = props => {
const {onClick} = props;
const hey = () => {
alert("hey~!~~!~!~!~!");
}
return(
<>
<h1 onClick={hey}>여기 눌러봐</h1>
</>
);
};
export default Event;websocket
- 브라우저랑 서버를 연결을 구성하는 html5 프로토콜
- 양방향 통신
- 실시간 네트워킹
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
<script>
var socket = io.connect();
console.log( socket );
// on : 통신을 받는다. 수신
// emit : 통신을 보낸다. 송신
function go(){
socket.emit( "a", document.getElementById( "abc" ).value );
}
socket.on( "send", function( data ){
alert( data );
});
// socket.emit( "event", { name: "홍길동" } );
</script>
</head>
<body>
<h1> Socket View 파일입니다. </h1>
<input type="text" id="abc">
<button type="button" onclick="go();">버튼</button>
</body>
</html>const express = require( 'express' );
const app = express();
const port = 8000;
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.on( "a", ( a )=>{
console.log( a );
socket.emit( "send", "hi" );
});
socket.on( "disconnect", ()=>{
console.log( "disconnect" );
});
// // 보낼 때는 socket.emit
// socket.on( "event", ( data ) => {
// console.log( data );
// });
// socket.on( "event1", ( data ) => {
// console.log( data );
// });
// socket.on( "event2", ( data ) => {
// console.log( data );
// });
// socket.on( "event3", ( data ) => {
// console.log( data );
// });
// socket.on( "event4", ( data ) => {
// console.log( data );
// });
// socket과 관련한 통신 작업을 모두 처리
});
http.listen( port, () => {
console.log( "8000!" );
});
Front-end Engineer, Web Developer & UX/UI Design