JavaScript×CSS×Electron×Expressでチャットアプリ風なものを開発してみる

そろそろこんばんは、豆珈琲です。

 最近、JavaScriptとElectronを中心に触っているのですが、
チャットアプリ……つまり

  • デスクトップアプリの開発
  • 見た目の良いアプリのためのCSSの編集
  • ローカルサーバーを使った開発

のためにチャットアプリを触っています。
今回はソースコードの解説をすると大変なので概要備忘録です。そして長くなるので、分けて投稿します。

mamecafe.hatenablog.com

mamecafe.hatenablog.com

 

 現在の進捗

f:id:mamecafe:20170914171815p:plain

コンソールを2つ起動し、一方をサーバ用にもう一方をelectronの起動用にします。

< node-dev ./bin/www

< electron .

node-dev はnpmで開発用にインストールしました。expressではnvm ./bin/wwwでapp.jsがサーバとして起動します。node-devで起動した場合、app.jsを含めて関連ファイルの更新が入った場合に自動でサーバの再起動をしてくれます。

electron . で起動した理由はまだ開発中のアプリはパッケージ化していないので、コンソールからの起動です。package.jsonのmain:に記述したファイル(main.js)がelectronで起動します。

チャットテキストの部分にテキストを打ち込み、ボタンを押すと左側のエース(赤い服)のところでメッセージが表示します。

右側のゆっくり霊夢(顔面のみの生き物)は現在、固定メッセージですがいずれは動かす予定です。

サーバを起動の準備(プロジェクト作成)

express -e chatApp

サーバ起動まではexpressで自動生成で起動できます。

上のコマンドでプロジェクトを作成した場合は、viewエンジンがejsで生成されます。
豆珈琲がejsとhtmlしか知識が無かったので、ejsで生成しました。

Socket通信の準備をする

前述のプロジェクト作成ではapp.jsファイルが作成されます。
(electron用のアプリとしてmain.jsは別途容易済み)

app.jsファイルに以下のコードを入れます。

const http = require('http').Server(app);

const PORT = process.env.PORT || 3000;

var socket = require('./routes/module/mod_socket.js');

websocket通信のため、追加でmod_socket.jsを作成して、モジュールとして読み込んでいます。

殆どソースがコピペになったので、参考URLを掲載させて頂きますmm

Express×socket.ioを使ってwebsocketで遊ぼう~第1話~ - Qiita

参考

丁寧に説明が掲載されているページです。ありがとうございます。

  1. 【node.js】Express+EJS使い方メモ2 express-generatorを使ってアプリの雛形を作成する。 | SAGA.TXT

  2. Express×socket.ioを使ってwebsocketで遊ぼう~第1話~ - Qiita