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