ファイナンス、情報通信技術のスキル・アグリゲーション・サイト

Python Tornado で Secure WebSocket

Tornade で Secure WebSocket （wss://）のサンプルプログラムです。接続するクライアントプログラムは、Python の websocket-client モジュールを利用した例と、HTML5 & JQuery を利用した例です。

SSL 証明書は、プライベート証明書を作成しました。手順については、「プライベート認証局でプライベート SSL/TLS 証明書を発行する」も参照してください。

なお、ブラウザでの確認は、CentOS 6 上の Firefox を利用しました。その際、 tlsv1 alert unknown ca というようなアラートが出たときの対応です。



# update-ca-trust enable
# cp ca.crt /etc/pki/ca-trust/source/anchors/
# update-ca-trust extract

また、 sslv3 alert bad certificate のようなアラートが出たときは、サーバ証明書の Common Name がドメイン名と一致しているか確認しました。

Secure WebSocket のサーバプログラム例（Tornado）

Tornado を利用した WebSocket サーバ例です。

http://www.tornadoweb.org/en/stable/websocket.html



#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.httpserver
import tornado.websocket
import tornado.ioloop
import tornado.web

class WSHandler(tornado.websocket.WebSocketHandler):
  clients = []
  def check_origin(self, origin):
    return True

  def open(self):
    WSHandler.clients.append(self)
    print "Connected.\n"

  def on_message(self, message):
    print "Received message:%s\n" % message
    for con in WSHandler.clients:
      con.write_message(message)

  def on_close(self):
    WSHandler.clients.remove(self)
    print "Closed.\n"

application = tornado.web.Application([
  (r"/ws", WSHandler),])

if __name__ == "__main__":
  http_server = tornado.httpserver.HTTPServer(
    application, ssl_options={
    "certfile": "server.crt",
    "keyfile":  "server.key",})
  http_server.listen(8888)
  tornado.ioloop.IOLoop.instance().start()

次に、Tornado のテンプレートを利用した例です。 HTML5 & JQuery の WebSocket クライアント例を index.html のファイル名で templates ディレクトリに保存します。templates ディレクトリは、 Python Tornado プログラムファイルを保存したディレクトリ内に作成します。



#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.httpserver
import tornado.websocket
import tornado.ioloop
import tornado.web
import os

class MainHandler(tornado.web.RequestHandler):
  def get(self):
    self.render("index.html")

class WSHandler(tornado.websocket.WebSocketHandler):
  clients = []
  def check_origin(self, origin):
    return True

  def open(self):
    WSHandler.clients.append(self)
    print "Connected.\n"

  def on_message(self, message):
    print "Received message:%s\n" % message
    for con in WSHandler.clients:
      con.write_message(message)

  def on_close(self):
    WSHandler.clients.remove(self)
    print "Closed.\n"

settings = {
  "template_path": os.path.join(os.path.dirname(__file__), "templates"),
} 

application = tornado.web.Application([
  (r"/ws", WSHandler),
  (r"/", MainHandler),
], **settings)

if __name__ == "__main__":
  http_server = tornado.httpserver.HTTPServer(
    application, ssl_options={
    "certfile": "server.crt",
    "keyfile":  "server.key",})
  http_server.listen(8888)
  tornado.ioloop.IOLoop.instance().start()

Secure WebSocket のクライアントプログラム例

Python の websocket-client モジュールを利用した例です。

https://github.com/websocket-client/websocket-client



#!/usr/bin/env python
# -*- coding:utf-8 -*-
import sys
import ssl
from websocket import create_connection

ws = create_connection("wss://www.example.jp:8888/ws",
  sslopt={"cert_reqs": ssl.CERT_NONE,
          "check_hostname": False})
 
if len(sys.argv) > 1:
  message = sys.argv[1]
else:
  message = "hello websocket!"
 
sndlen = ws.send(message)
rcvmsg = ws.recv()
print "Received:%s\n" % rcvmsg
 
ws.close()

次に、HTML5 & JQuery の WebSocket クライアント例です。チャットプログラムを簡略にしたようなデザインとしました。

Tornado のテンプレートを利用したサーバプログラム例の場合は、index.html のファイル名で templates ディレクトリに保存します。templates ディレクトリは、 Python Tornado プログラムファイルを保存したディレクトリ内に作成します。



<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Tornado Chat Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
function ws() {
  var data = {};
  $("#chat").prepend("<p>Websocket START</p>");
  var s = new WebSocket("wss://www.example.jp:8888/ws");
  s.onerror = function() {
    $("#chat").prepend("<p>ERROR(/ws)</p>");
  }
  s.onopen = function() {
    $("#chat").prepend("<p>OPEN(/ws)</p>");
  }
  s.onmessage = function(e) {
    $("#chat").prepend("<p>" + e.data + "</p>");
  }
  $("#chatform").submit(function (evt) {
    var line = $("#chatform [type=text]").val()
    $("#chatform [type=text]").val("")
    s.send(line);
    return false;
  });
}
  </script>
 </head>
 <body>
  <div id="chat" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
  </div>
  <form id="chatform">
  <p>Message</p>
  <input type="text" />
  <input type="submit" value="送信" />
  </form>
  <script>
window.onload = function() {
  $("#chat").prepend("<p>ONLOAD</p>");
  ws();
};
  </script>
 </body>
</html>

2017年 5月 2日20時30分