[NodeJS][WebSocket][JavaScript]WebSocket 기초 사용하기, 단일 통신, server,client-(1)

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var WebSocketServer = require('ws').Server;

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'node_modules')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

var wss = new WebSocketServer({port: 3100});

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        let sendData = {event: 'res', data: null};
        message = JSON.parse(message);
        switch (message.event) {
            case 'open':
                console.log("Received: %s", message.event);
                break;
            case "req":
                sendData.data = message.data;
                ws.send(JSON.stringify(sendData));
                break;
            default:
        }
    });
});

module.exports = app;

코드에 쓸데 없는 코드들이 많아서 중요한것만 추려서 설명하겠다.

app.use(express.static(path.join(__dirname, 'node_modules')));

사실 WebSocket이랑은 상관없는데 클라이언트에서 jquery사용하므로 경로를 뚫어준다.

npm install --save ws

npm install --save jquery

웹소켓과 jquery를 설치해준다.

당장은 jquery를 사용하진 않지만 client에서 사용할 예정이다.

var WebSocketServer = require('ws').Server;

일단 WebSocketServer를 사용하기 위해서 require한다.

var wss = new WebSocketServer({port: 3100});

그리고 SocketServer를 열어준다. 포트는 마음대로하자.

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        let sendData = {event: 'res', data: null};
        message = JSON.parse(message);
        switch (message.event) {
            case 'open':
                console.log("Received: %s", message.event);
                break;
            case "req":
                sendData.data = message.data;
                ws.send(JSON.stringify(sendData));
                break;
            default:
        }
    });
});

일반적인 WebSocket예제보다 조금 어려운데

그 이유는 WebSocket은 어떠한 이벤트인지 서버쪽에서 알 수 없어서 보통 WebSocket을 써도

어떤 이벤트인지 알려주는 로직을 달게된다.

다만 WebSocket은 문자열로 전송이 되는데 이를 json을 보내도 문자열로 보내야한다. 즉 직렬화(마샬링)해줘야한다.

그래서 넘어온 데이터는 문자열이므로 JSON.parse로 다시 객체화 시킨다.

그리고 event를 겁사해서 해당 이벤트일때 작업을 실행한다.

Client

<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="../jquery/dist/jquery.min.js"></script>
</head>
<body>
<textarea rows="20" cols="30" id="chat"></textarea><br>
<input type="text" id="user"><input type="button" value="msg submit" onclick="myOnClick()">
</body>
<script>
    var ws = new WebSocket('ws://localhost:3100');
    ws.onopen = (event) => {
        let sendData = {event: 'open'}
        ws.send(JSON.stringify(sendData));
    }
    ws.onmessage = (event) => {
        console.log(event.data);
        let recData = JSON.parse(event.data);
        switch (recData.event) {
            case 'res':
                $('#chat').val($('#chat').val() + recData.data.comment + '\n');
                break;
            default:
        }
    }

    function myOnClick() {
        let sendData = {event: 'req', data: {comment: $('#user').val()}};
        ws.send(JSON.stringify(sendData));
        $('#user').val('');
    }
</script>
</html>

여기의 코드를 분석해 보자.

var ws = new WebSocket('ws://localhost:3100');

먼저 연결할 웹 소켓을 선언해준다.

WebSocket은 웹에 기본 스펙이 있기 때문에 따로 선언해줄 필요는 없다.

ws.onopen = (event) => {
    let sendData = {event: 'open'}
    ws.send(JSON.stringify(sendData));
}

열렸을때의 이벤트를 지정한다.

사실 크게 할건 없지만 예제를 위해서 전달해준다.

여기서 우리가 임의로 event를 붙혔는데 WebSocket을 socketio처럼 이벤트로 분리해서 쓰기위한 예제이다.

ws.onmessage = (event) => {
    console.log(event.data);
    let recData = JSON.parse(event.data);
    switch (recData.event) {
        case 'res':
            $('#chat').val($('#chat').val() + recData.data.comment + '\n');
            break;
        default:
    }
}

이 부분은 서버에서 데이터가 넘어왔을때 채팅창에 글자를 출력하는 예제이다.

여기서 jquery를 사용했기 때문에 아까 npm install jquery를 해준 것이다.

function myOnClick() {
    let sendData = {event: 'req', data: {comment: $('#user').val()}};
    ws.send(JSON.stringify(sendData));
    $('#user').val('');
}

마지막으로 제출 했을때 데이터를 직렬화해서 서버로 보내는 코드이다.

코드를 보면 알겠지만 보낼때는 ws.send를 사용한다는것을 알 수 있고 받을 때는 함수의 파라메터인 event에서 받는걸 알 수 있다.

저작자표시

'Usage > JavaScript-NodeJS' 카테고리의 다른 글

[GraphQL][NodeJS][Express]graphql에서 Type System - Query, Scalar, Object(2) (0)	2019.06.09
[GraphQL][NodeJS][Express]nodejs express에서 graphql 서버 만들기(1) (0)	2019.06.08
[NodeJS][Express][Web][JavaScript]Hidden Iframe Streaming으로 웹 채팅구현(http 양방향) (0)	2019.01.30
[NodeJS][Express][Web][JavaScript]Long Polling으로 웹 채팅구현(http 양방향) (1)	2019.01.13
[NodeJS][SocketIO][Java][Android]SocketIO로 NodeJS와 Android client 통신(4) (0)	2018.08.08

Kamang's IT Blog

[NodeJS][WebSocket][JavaScript]WebSocket 기초 사용하기, 단일 통신, server,client-(1)

'Usage > JavaScript-NodeJS' 카테고리의 다른 글

+ Recent posts

티스토리툴바