簡易的なWebチャットを実装する
はじめに
この記事はSLP KBIT Advent Calender 2019の16日目の記事である。
Socket.ioを用いた開発をまだやったことがなかったので今回はそういった開発を行っていきたいと思います。
かなり前に作ったので実装過程をかなり忘れてしまいました…。
環境
・Windows 10(64bit)
・Node.js : v10.15.3
準備
この開発ではNode.js、Socket.ioの他に、ローカルサーバーを簡単に立ち上げれるExpressを使うのでもしインストールしていない人は以下のコマンドでインストールしてみましょう。
$ npm install express
実装
サーバをたてる準備
create.js
varexpress=require('express');//expressを使用varapp=express();varhttp=require('http').Server(app);constpath=require('path');constio=require('socket.io')(http);constPORT=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_roomディレクトリにチャットを表示するhtmlとcssファイルを用意しているので最後の行で
app.use(express.static(path.join(__dirname, 'chat_room')));
と記述しています。(これがないとchat_roomの中にあるcssを読み込んでくれなかった)
HTMLとCSS
チャットを表示するためのHTMLとCSSを作ります
chat.html
<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html charset=UTF-8"><title>Socketテスト</title><linkrel="stylesheet"type="text/css"href="./style.css"/></head><body><h1>チャットテスト(・v・)/</h1><!-- メッセージ入力欄 --><formaction="#"id="chatForm"><inputid="u"autocomplete="off"placeholder="ユーザ名"/><inputid="m"autocomplete="off"placeholder="テキスト"/><button>Send</button></form><hr><!-- メッセージの表示 --><ulid="messages"></ul><!--必須モジュール２つ--><script src="/socket.io/socket.io.js"></script><script src="https://code.jquery.com/jquery-1.11.1.js"></script><script>varsocket=io();//var userName = 'test';$(function(){varuserName='';// メッセージを送信する$('form').submit(function(){socket.emit('chat message',$('#m').val(),$('#u').val());$('#m').val('');returnfalse;});// 受信したメッセージを表示// ul id ="messages"の部分socket.on('chat message',function(data){varchat=data.userName+"『 "+data.message+"』";if((data.message!='')&&(data.userName!='')){//空じゃない場合$('#messages').append($('<p id="chat">').text(chat));//ユーザとテキストは前提条件}});});</script></body></html>style.css
#messages{padding:0.5em1em;margin:2em0;border:solid3px#9facd4;}#chat{margin-top:1px;padding:2px;background-color:rgb(218,246,255);color:#292929;}実際に使ってみる
nodeコマンドでサーバを立ち上げます。
ローカルホストで指定したポートにアクセスすると以下のような画面が出ます。
ユーザ名とテキストを入力してsendを押すと
きちんとセリフっぽくなりましたね！
ウインドウを２つ以上開いた場合
・送信前
・送信後
片方が送信すると両方のウインドウに反映されましたね。
これでローカル環境でチャットが出来そうです。
おわりに
チャット機能の実装だけを目標にしていたので見た目がシンプルになってしまいましたが最後まできちんとやりきることができてよかったです。アイコンを実装したりもう少し見た目をよくすると本格的なチャットが楽しめるかなと思います。