・socket.io는 emit으로 송신한 정보를 on으로 받는 매우 단순한 구조이다!

・단 emit과 on의 소켓명이 동일 해야한다. 아래의 소스코드의 경우

서버에서 클라이언트로 정보를 송신할 때, news라는 이름의 소켓으로 emit한 데이터는 클라이언트에서 news라는 이름의 소켓이서만 받을 수 있다.



app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * Module dependencies.
 */
 
var express = require('express')
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
 
 
app.set('port', process.env.PORT || 3000);
app.set('views','./views');
app.set('view engine', 'ejs');
app.use(express.static('./public'));
 
 
server.listen(app.get('port'),function(){
    console.log(`connection complete. Open page localhost:${app.get('port')}`);
});
 
app.get('/', function (req, res) {
    res.render('chat');
});
 
io.on('connection', function (socket) {
 
    func1(0);
 
    function func1(i){
        setTimeout(function(){
            if(i<20){
                socket.emit('news', i);
                func1(i+1);
            }
        },1000);
    }
 
 
    socket.on('msg', function (data) {
        console.log('date from client : '+data);
    });
});
cs







chat.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
 
<body>
<div id="head">
    <p>Hi This is socket test</p>
</div>
<div id="body">
</div>
 
 
</body>
<script>
    var socket = io.connect('http://localhost:3000');
 
    socket.on('news', function (data) {
        $('#body').append(`<p>data from server : ${data}</p>`);
        console.log('data from server : '+data);
    });
 
 
    func1(0);
    function func1(i){
        setTimeout(function(){
            if(i<20){
                socket.emit('msg', i);
                func1(i+1);
            }
        },1000);
    }
 
</script>
cs



















저작자표시 비영리 변경금지

'C Lang > JS Technic' 카테고리의 다른 글

?를 이용해 한 줄로 쓰는 if문  (0) 2018.08.09
Node.js StreamAPI★  (0) 2018.08.08
실시간 데이터 송신의 진화 : 폴링 방식, 롱폴링 방식, 웹소켓  (1) 2018.08.06
서버로 파일 송신하는 웹어플 만들기 feat. formDate객체(front),formidable모듈(server)  (0) 2018.07.30
pm2 설정파일을 통한 환경변수로 pm2 start  (0) 2018.07.25

+ Recent posts

티스토리툴바