【Python】AdminLTEとWebSocketでチャット機能を作ってみる その2(ログイン機能)

Python, 開発

おはようございます。

チャットの実装ですが、
ユーザー毎の制御(トークルームみたいな)を実現するために
MySQLにマスタを持たせて、ひとまずログイン機能を実装します。

プログラムは前回のものを流用します。
【Python】AdminLTEとWebSocketでチャット機能を作ってみる その1(とりあえず版)

スポンサーリンク

下準備

今回から、MySQLを使っていきますのでその下準備を。
次のテーブルを作成してデータを登録しておきます。

テーブル

データ

 

ライブラリの追加

次の2つを、「メニュー」>「Default Settings」よりインストールします。

  • mysql-connector-python-rf
  • configparser

フォルダ構成

フォルダ構成は次のようになります。
前回からの変更点は、conf、Daoあたりですかね。

SampleChat
│ Main.py

├─conf
│     db.config

├─Dao
│     MstPasswordDao.py
│     MstUserDao.py
│     SqlClient.py

├─static
│ ├─css
│ │ │     AdminLTE.css
│ │ │     AdminLTE.min.css
│ │ │     login.css
│ │ │     style.css
│ │ │
│ │ └─skins
│ │             skin-blue.css
│ │             skin-blue.min.css
│ │
│ ├─img
│ │     konatsu.jpg
│ │     koume.jpg
│ │     riku.jpg
│ │     sora.jpg
│ │     umi.jpg
│ │
│ └─js
│         adminlte.min.js
│         script.js

└─templates
login.html
main.html

画面

ログイン画面

以前記事に書いた【Python】FullCalendarにログイン機能をつけてみる を流用しました。

画面

login.html

スタイル

login.css

メイン画面

ヘッダーメニューを追加、
OSSのCSS、JSはCDNから取得するように変更しました。

main.html

プログラム

新規追加

MySQLとやり取りするクラスを新規で作成します。

Dao/SqlClient.py

さらに、それぞれのテーブルよりデータを取得するためのクラスを追加。

Dao/MstUserDao.py

 

MstPasswordDao.py

既存クラスの修正

メイン処理にログイン機能を追加します。

起動してみる

ログイン画面
ログイン画面

ユーザID、パスワードを入力してボタンをクリック。

ログイン後トップ
ログイン後トップ

チャット画面が表示されました。

まとめ

ログイン自体は以前もやったので大したことはなかったのですが、トークルームの実装について悩んでいます。
(複数人でのチャットや入室、退室をどうしよう)

とりあえず次回はデータを取得して表示するのと、
メッセージ送信時にDBに登録するところをやってみようかと思います。

ではでは。