[Node.js] Node.js를 이용한 웹소켓 채팅 프로그램

socket.io는 웹소켓 라이브러리로, 양방향 통신이 가능하도록 만들어주는 기술이다.

웹소켓을 이용한 채팅프로그램을 연구하다가 node.js을 통해 socket.io를 사용하면 채팅프로그램 구현이 가능하다.

 

node.js를 윈도우에 설치하고 npm install 명령어를 통하여 node.js를 설치한다.

그리고 설치된 경로에 들어가보면 클라이언트와 서버 소스코드가 있는데 그 코드를 이렇게 구성하였다.

 

먼저, public/javascripts/socket.js 파일이다.

이 js파일은 클라이언트 소스코드이다.

 

 

const socket = io();

const chatForm = document.getElementById('chat-form');
const chatBox = document.getElementById('messages');

chatForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = e.target.m.value
    socket.emit('chat message', message);
    e.target.m.value = '';
})

socket.on('connect', function() {
	var name = prompt('반갑습니다 성함을 입력해주세요', '')
	if (!name) {
		name = '익명'
	}
	socket.emit('newUser', name);
})

socket.on('chat message', (message) => {
    chatBox.appendChild(makeMessage(message));
})

const makeMessage = (message) => {
    const msgBox = document.createElement('div');
    msgBox.className = "message-wrapper";
    msgBox.innerText = message;
    return msgBox;
}

 

 

 

그리고, 서버소스 코드이다.

서버코드는 bin\www 파일이며, notepad와 같은 프로그램으로 편집가능하다.

 

//bin/www

/**
 * Module dependencies.
 */

const app = require('../app');
const debug = require('debug')('socket-example:server');
const http = require('http');

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

const server = http.createServer(app);
const io = require('socket.io')(server);

/**
 * Listen on provided port, on all network interfaces.
 */
io.on('connection', (socket) => {
	var name;
	socket.on('newUser', (message) => {
	console.log(message + '님이 입장하셨습니다');
    io.emit('chat message', message + '님이 입장하셨습니다');
	name = message;
  });
  socket.on('chat message', (message) => {
    io.emit('chat message', name + ":" + message);
  });
  
  socket.on('disconnect', () => {
	console.log(name + '님이 나가셨습니다');
	io.emit('chat message', name + '님이 나가셨습니다');
  });
});


server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  const bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  const addr = server.address();
  const bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}


//to delete
exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

 

간단하게 문법을 설명하자면 connection, disconnect와 같은 명령어로 서버에 연결되었을때와 끊겼을 때의

메소드를 정의할 수 있다.

또한 socket.emit에서 emit은 방출하다의 의미로써 클라이언트가 서버에게, 혹은 서버가 클라이언트에게 전송할 때의 메소드이며

socket.on에서 on은 서버가 클라이언트에게 메세지를 받을때나 클라이언트가 서버에게 메세지를 받을 때 사용하는 메소드이다.

node.js를 이용하여 실제로 프로젝트를 구성하고 양방향 채팅 프로그램을 구현해 보았다.