【Python】AdminLTEとWebSocketでチャット機能を作ってみる その1(とりあえず版)

2018年9月29日Python,開発

おはようございます。

昨日に引き続き、チャット機能の実装をしていきます。

予定通り、今回は Python の Tornado を使って
実際にメッセージのやり取りができるような仕組みを実装します。

スポンサーリンク

フォルダ構成

新規で Pythonプロジェクトを作成し、先日のサンプルを移植、処理を実装していきます。

SampleChat

│  Main.py
├─static
│ ├─css
│ │ │ AdminLTE.css
│ │ │ AdminLTE.min.css
│ │ │ bootstrap.min.css
│ │ │ font-awesome.min.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
│    bootstrap.min.js
│    jquery-ui.min.js
│    jquery.min.js
│    moment.min.js
│    script.js

└─templates
main.html

画面

メイン画面

main.html

CSSやJavascript、イメージなどのパスの指定と、微妙に修正した箇所があります。

 

スタイル

style.css

 

プログラム

Tornadoを利用しています。
利用方法は次の記事なんかを参考にしていただければ。

【Python】スマホで読み込むと Wi-Fi に繋げられるQRコードを生成してみる

サーバー側

Main.py

 

クライアント側(Javascript)

script.js

 

起動してみる

初期表示
初期表示
メッセージ送信
メッセージ送信

送信したメッセージが無事に戻ってきました。

まとめ

ひとまず簡単に、
Websocketを使った処理が実装できました。

次回はユーザー毎の制御でも実装していきましょうか。
それにはログイン機能が必要ですね。

ではでは。

スポンサーリンク


関連するコンテンツ

2018年9月29日Python,開発AdminLTE,CSSフレームワーク,Python,Tornado,WebSocket,プログラミング

Posted by doradora