Node.jsとsocket.ioでLine風チャットを作成してみた1 #Node.js

node.jsとsocket.ioを使用する機会があったので、簡単にチャットを作ることにしました。
今回はチャット部分を作成します。
完成品だけ見たい場合は4を見てください
https://qiita.com/Catatataki/items/03ce43785466603dadac

作成イメージ

ディレクトリ

手順

node.jsでsocket.ioをインストール
node chatServerでsocket.ioを起動
htmlを開く

コード

npm install save socket.io

hello.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./Line.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./Line.js"></script>
</head>

<body>
    <div class="line">
    </div>

    <div class="submit">
        <input class="form-control" id="msgForm" autocomplete="off" maxlength="120">
        <input type="button" id="sendButton" onclick="window.message()" value="送信">
    </div>
</body>

</html>

hello.CSS

.line {
  overflow:scroll;
  float: left;
  width:750px;
  height:370px;
  padding: 20px 10px;
  max-width: 450px;
  margin: 15px auto;
  font-size: 14px;
  background: #7da4cd;
}

.others{
  display: inline-block;
  position: relative;
  left: 0px;
}

.othercomment {
  display: inline-block;
  position: relative; 
  left:10px;
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
  text-align: left;

}

.othercomment:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.othercomment p {
  margin: 0;
  padding: 0;
}

.mycomment {
  margin: 10px 0;
  text-align: right;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px;
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.submit{
  position: relative;
  top: 450px; 
  left: -460px;
}

#msgForm{
  width:410px;
}

Line.js

var socket = io.connect('http://localhost:3000');//chatServer.jsとコネクト
joinUser();

socket.on("server_to_client", function (data) {　//chatServer.jsからデータ受信
    appendOtherMsg(data.otherMsg, data.name, data.img);
});

function appendOtherMsg(message) {
    $(".line").append('<div class="others"><div class="othercomment"><p>' + message + '</p></div></div><br><br>');
    $('.line').animate({ scrollTop: $('.line')[0].scrollHeight }, 'fast');
}

function appendMyMsg(message) {
    $(".line").append('<div class="mycomment"><p>' + message + '</p></div><br>');
    $('.line').animate({ scrollTop: $('.line')[0].scrollHeight }, 'fast');
}

function message() {
    if ($("#msgForm").val() != '') {
        var message = $("#msgForm").val();
        appendMyMsg(message);
        $("#msgForm").val('');
        socket.emit("client_to_server", { message: message });　//chatServer.jsにデータ送信
    }
}

function joinUser() {
    var selectRoom = 1;
    socket.emit("client_to_server_join", { room: selectRoom });　//chatServer.jsにデータ送信
}

$('#msgForm').keypress(function (e) {
    if (e.which == 13 && $("#msgForm").val() != ' ') {
        message();
        return false;
    }
});

chatServer.js

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(function (req, res) {

}).listen(3000);

var io = socketio.listen(server);

io.sockets.on('connection', function (socket) {
    var room = '';

    socket.on('client_to_server_join', function (data) { //roomに参加
        room = data.room;
        socket.join(room);
    });

    socket.on('client_to_server', function (data) {
        socket.broadcast.to(room).emit('server_to_client', { otherMsg: data.message });　//他の参加者にメッセージをブロードキャスト
    });
});

node chatSever

次回

次はメッセージに名前を付けていこうと思います。
https://qiita.com/Catatataki/private/62b58a75ecceb5c8eecc