では、今回はチャットアプリを完成させちゃいましょう！^_^
今回作る項目としては以下の通りです。
投稿したメッセージをブラウザに表示させる
ここでやりたいことは、
すると、入力したメッセージがテキストエリアの下部に表示されるようにします☺
それではさっそく作っていきましょう！(^^♪
ます、サーバ側プログラムであるapp.js を開きましょう^_^/*ここから追加*/ で囲まれている部分を追加してあげましょう！
var express = require('express' );
const app = express();
const server = require('http' ).Server(app);
const io = require('socket.io' )(server);
app.get('/' , (req, res) => {
res.sendFile(__dirname + '/index.html' );
} );
io.on("connection" , socket => {
console.log('接続成功' );
socket.on('message_event' ,function (data){
console.log('message: ' + data)
io.emit('message' , data);
} );
} );
server.listen(3000);
クライアント側のindex.html も開きましょう！/*ここから追加*/ で囲まれている部分を追加してあげましょう！
< html >
< head >
< title > ChatApplication</ title >
< script src = "http://localhost:3000/socket.io/socket.io.js" ></ script >
< script src = "https://code.jquery.com/jquery-1.11.1.js" ></ script >
</ head >
< body >
< div class = "title" >
< h1 > チャットアプリ</ h1 >
</ div >
< form id = "message_form" action = "#" >
< div class = "form" >
< input id = "input_msg" autocomplete= "off" />
< button >
Send
</ button >
</ div >
</ form >
< script >
const socketio = io ();
$ (function (){
$ ('#message_form' ).submit (function (){
var data = $ ('#input_msg' ).val ();
socketio.emit ('message_event' , data );
$ ('#input_msg' ).val ('' );
return false ;
} );
socketio.on ('message' , function (data ){
$ ('#messages' ).append ($ ('<li>' ).text (data ));
} );
} );
</ script >
< ul id = "messages" ></ ul >
</ body >
</ html >
追加できましたら、動作を確認してみましょう！コマンドプロンプト (ターミナル)を開き、node.jsを起動します。
node app.js そして、ブラウザでhttp://localhost:3000
チャット画面が開きましたら、今回はテキストエリアにメッセージを入力して、
入力したメッセージがテキストエリアの下部に表示されればOKです！
デザインを組み込む
大体のチャットアプリ機能は完成しましたが、
ということで、デザインを組み込みたいと思います。
デザインを組み込むには、CSS (Cascading Style Sheets )CSS ファイルを作りましょう^_^
現在、app.jsファイルがあるフォルダの構成は下記の通りだと思います。
├ app.js
├ index.html
├ package.json
├ package-lock.json
└ node_modules/ ←フォルダ
ここにpublic という名前のフォルダを作成してください^_^
├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/
└ public/ ←フォルダ作成
作成しましたら、publicフォルダに入り、css ファイルを作成してください^_^
├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/
└ public/ ←フォルダ作成
└ style.css ←作成
style.css を作成しましたら、テキストエディタ (メモ帳やさくらエディタなど)で、style.css を開きましょう！
そして、style.css に下記の内容を記述しましょう！^^
* {
margin :0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
font-size : 100 %;
vertical-align : baseline ;
background : transparent ;
}
html {
display : block ;
scroll-behavior: smooth;
}
body {
font-size : 13px ;
line-height : 1.7 ;
font-family :sans-serif ;
display : block ;
}
div {
display : block ;
}
a {
text-decoration : none ;
margin : 0 ;
font-size : 100 %;
color : black ;
}
button {
padding :0.3 % 3 %;
background-color : rgb( 6 , 6 , 112 ) ;
border-radius : 40px ;
font-size : 16px ;
border : none ;
color : white ;
transition : 0.3s ;
cursor : pointer ;
margin-left : 10px ;
}
button :hover {
background-color :rgb( 0 , 0 , 255 ) ;
transition : 0.3s ;
}
h1 {
font-size : 30px ;
margin : 10px 10px ;
}
input {
border : solid black 1px ;
margin-left : 15px ;
height : 20px ;
width : 200px ;
}
.form {
display : flex;
}
#messages {
font-size : 18px ;
margin-top : 10px ;
margin-left : 15px ;
list-style : none ;
}
これでCSS の実装は完了です。CSS の意味についても、また別途記事で説明したいと思います^_^
では、サーバ側app.js、クライアント側index.htmlにおいて、デザイン(CSS )を読み込むようにしましょう！app.use(express.static('public')); を追加してください！
var express = require('express' );
const app = express();
const server = require('http' ).Server(app);
const io = require('socket.io' )(server);
app.use(express.static ('public' ));
app.get('/' , (req, res) => {
res.sendFile(__dirname + '/index.html' );
} );
io.on("connection" , socket => {
console.log('接続成功' );
socket.on('message_event' ,function (data){
console.log('message: ' + data)
io.emit('message' , data);
} );
} );
server.listen(3000);
次に、クライアントです。
タグ内に
を追加してください！
< html >
< head >
< title > ChatApplication</ title >
< script src = "http://localhost:3000/socket.io/socket.io.js" ></ script >
< script src = "https://code.jquery.com/jquery-1.11.1.js" ></ script >
< link rel = 'stylesheet' href = "/style.css" />
</ head >
< body >
< div class = "title" >
< h1 > チャットアプリ</ h1 >
</ div >
< form id = "message_form" action = "#" >
< div class = "form" >
< input id = "input_msg" autocomplete= "off" />
< button >
Send
</ button >
</ div >
</ form >
< script >
const socketio = io ();
$ (function (){
$ ('#message_form' ).submit (function (){
var data = $ ('#input_msg' ).val ();
socketio.emit ('message_event' , data );
$ ('#input_msg' ).val ('' );
return false ;
} );
socketio.on ('message' , function (data ){
$ ('#messages' ).append ($ ('<li>' ).text (data ));
} );
} );
</ script >
< ul id = "messages" ></ ul >
</ body >
</ html >
これで、読み込み完了です！
node.jsの落とし方は、コマンドプロンプト 上で「Ctrlキー」と「Cキー」の同時押し で落とすことができます^_^
では、node.js再度起動します！
node app.js そして、ブラウザでhttp://localhost:3000
すると、デザインが反映されていれば、OKです！
投稿した日付を付ける
さぁあ、最後です！
ということで、投稿日時も付けるようにしたいと思います！
まずは、クライアント側のindex.html を開きましょう！^_^
コメントで//追加 という行を追加して、//削除 という行を削除します。
< html >
< head >
< title > ChatApplication</ title >
< script src = "http://localhost:3000/socket.io/socket.io.js" ></ script >
< script src = "https://code.jquery.com/jquery-1.11.1.js" ></ script >
< link rel = 'stylesheet' href = "/style.css" />
</ head >
< body >
< div class = "title" >
< h1 > チャットアプリ</ h1 >
</ div >
< form id = "message_form" action = "#" >
< div class = "form" >
< input id = "input_msg" autocomplete= "off" />
< button >
Send
</ button >
</ div >
</ form >
< script >
var today = new Date ();
const socketio = io ();
$ (function (){
$ ('#message_form' ).submit (function (){
var year = today.getFullYear ()
var month = ("0" +today.getMonth ()+ 1).slice (-2);
var date = ("0" +today.getDate ()).slice (-2);
var hour = ("0" +today.getHours ()).slice (-2);
var minutes = ("0" +today.getMinutes ()).slice (-2);
var datetime = year + "/" + month + "/" + date + " " + hour + ":" + minutes
var data = JSON.stringify ({ datetime:datetime, message:$ ('#input_msg' ).val ()} );
socketio.emit ('message_event' , data );
$ ('#input_msg' ).val ('' );
return false ;
} );
socketio.on ('message' , function (data ){
var data_json = JSON.parse (data );
$ ('#messages' ).append ($ ('<li>' ).text (data_json.message ));
$ ('#messages' ).append ($ ('<div class="datetime">' + data_json.datetime + '</div>' ));
$ ('#messages' ).append ($ ('<div class="border" />' ));
} );
} );
</ script >
< ul id = "messages" ></ ul >
</ body >
</ html >
次に、public/style.css (CSS ファイル) を開き、以下の.border セレクタ と.datetimeセレクタ 箇所 を追加してください！^_^
* {
margin :0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
font-size : 100 %;
vertical-align : baseline ;
background : transparent ;
}
html {
display : block ;
scroll-behavior: smooth;
}
body {
font-size : 13px ;
line-height : 1.7 ;
font-family :sans-serif ;
display : block ;
}
div {
display : block ;
}
a {
text-decoration : none ;
margin : 0 ;
font-size : 100 %;
color : black ;
}
button {
padding :0.3 % 3 %;
background-color : rgb( 6 , 6 , 112 ) ;
border-radius : 40px ;
font-size : 16px ;
border : none ;
color : white ;
transition : 0.3s ;
cursor : pointer ;
margin-left : 10px ;
}
button :hover {
background-color :rgb( 0 , 0 , 255 ) ;
transition : 0.3s ;
}
h1 {
font-size : 30px ;
margin : 10px 10px ;
}
input {
border : solid black 1px ;
margin-left : 15px ;
height : 20px ;
width : 200px ;
}
.form {
display : flex;
}
#messages {
font-size : 18px ;
margin-top : 10px ;
margin-left : 15px ;
list-style : none ;
}
.border {
border : solid 0.5px rgb( 117 , 117 , 117 ) ;
}
.datetime {
font-size : 14px ;
color : rgb( 22 , 22 , 22 ) ;
margin-left : 90 %;
}
app.js の修正は不要です！
では、再度node.jsを落として、起動します。
node app.js そして、ブラウザでhttp://localhost:3000
おめでとうございます！
最後までお疲れ様でした^_^
