Node.js와 Socket.io에서 간단한 채팅을 할 수 있습니다.

간단한 인터넷 채팅 실현

입문

이 글은 SLP KBIT Advent Calender 2019 16일째 글입니다.
Socket.아직 io를 이용한 개발을 하지 않았기 때문에 이번에 이런 개발을 하려고 합니다.
오래전에 만들었기 때문에 설치 과정을 좀 잊어버렸는데...

환경

・Windows10(64bit)
・Node.js : v10.15.3

준비

이 개발에서 Node.js、Socket.io 이외에 로컬 서버를 시작하기 쉬운 Express를 사용하기 때문에 설치하지 않은 사람은 아래 명령으로 설치하십시오.

$ npm install express

실시

서버 구축 준비

create.js

var express = require('express');//expressを使用
var app = express();
var http = require('http').Server(app);

const path = require('path');
const io = require('socket.io')(http);
const PORT = process.env.PORT || 4649;

app.get('/' , function(req, res){
    res.sendFile(__dirname+'/chat_room/chat.html');//chat.htmlへ移動
});



io.on('connection',function(socket){
     // メッセージ送信処理
    socket.on('chat message', function(msg, user){
    //io.emit('chat message', msg);
    io.emit('chat message', {
        userName: user,
        message: msg
    });

  });
});

http.listen(PORT, function(){
    console.log('server listening. Port(・v・)/:' + PORT);//PORT番ポートに接続
});

app.use(express.static(path.join(__dirname, 'chat_room')));//chat_roomディレクトリを公開

참고로 chat_룸 디렉터리에 채팅을 표시하는 html와 css 파일을 준비했기 때문에 마지막 줄에

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

의 명세란 스타일에 정의된 설정입니다.(이것이 없으면 chat_room의 css를 읽지 않습니다.)

HTML 및 CSS

채팅 표시용 HTML 및 CSS 만들기
chat.html

<!DOCTYPE html>
<html>
    <head> 
      <meta http-equiv="content-type" content="text/html charset=UTF-8">
        <title>Socketテスト</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />

  </head>
  <body>
<h1>チャットテスト(・v・)/</h1>

<!-- メッセージ入力欄 -->
<form action="#" id="chatForm">
    <input id="u" autocomplete="off" placeholder="ユーザ名"/>
    <input id="m" autocomplete="off" placeholder="テキスト"/>
    <button>Send</button>
</form>
<hr>

<!-- メッセージの表示 -->
<ul id="messages"></ul>

<!--必須モジュール２つ-->
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  //var userName = 'test';
  $(function () {
var userName = '';
    // メッセージを送信する
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val(), $('#u').val());
      $('#m').val('');
      return false;
    });

    // 受信したメッセージを表示
    // ul id ="messages"の部分
    socket.on('chat message', function(data){
      var chat = data.userName + " 『 " + data.message + " 』";
      if ((data.message != '') && (data.userName != '') ) {//空じゃない場合
      $('#messages').append($('<p id="chat">').text(chat));//ユーザとテキストは前提条件
      }
    });
  });
</script>

</body>
</html>

style.css

#messages {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 3px #9facd4;

}

#chat {
    margin-top: 1px;
    padding: 2px;
    background-color: rgb(218, 246, 255);
    color: #292929;
}