websocketで来た内容をIFTTTに投稿してみる

Python製軽量WEB鯖Bottleを使い、websocketで来た内容をIFTTTに投稿してみます。
……jQueryクソ雑魚勢なので、やたら苦労しました……。

実際のところ

構成

ファイル構成は以下の記事と同様
shuzo-kino.hateblo.jp

$ tree
.
├── app.py
├── static
│   └── js
│       └── client.js
└── templates
    └── base.jade

3 directories, 3 files

スクリプト

app.py

from bottle import route, get, post, request, run, redirect, static_file, Bottle
#jade対応
from bottle_jade import JadePlugin
#websocket対応
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
#static対応
from os import path as op
#IFTTT投稿用
import requests


#初期化
app = Bottle()
templates = op.dirname(op.abspath(__file__)) + '/templates/'
jade = app.install(JadePlugin(template_folder=templates))

#静的ファイル置き場
@route('/static/:path#.+#', name='static')
def static(path):
    return static_file(path, root='static')

#ページ群本体
@get('/page')
def topPage():
	context = {"body": "basePage"} 
	return jade.render('base.jade', **context)     

@post('/page')
def postAction():
	theText = request.params.get('message')
	if theText:
		data = {"value1": theText, "value2": "def", "value3": "ghi"}
		headers = {'Content-Type': "application/json"}
		url = 'https://maker.ifttt.com/trigger/{{YOURAPPNAME}}/with/key/{{YOURACCOUNT}}'
		response = requests.post(url, json=data, headers=headers)
		messageString = "you posted: %s to IFTTT" % theText 
		print(messageString)
	return "You didn't post anything."

@get('/websocket', apply=[websocket])
def echo(ws):
    while True:
        msg = ws.receive()
        if msg is not None:
            ws.send(msg)
        else: break

#アプリ起動
run(host='localhost', port=8080, server=GeventWebSocketServer)

client.js

$(document).ready(function() {
            if (!window.WebSocket) {
                if (window.MozWebSocket) {
                    window.WebSocket = window.MozWebSocket;
                } else {
                    $('#messages').html("<li id=messages>Your browser doesn't support WebSockets.</li>");
                }
            }
            ws = new WebSocket('ws://127.0.0.1:8080/websocket');
            ws.onopen = function(evt) {
                $('#messages').append('<li id="messages">WebSocket connection opened.</li>');
            }
            ws.onmessage = function(evt) {
                $('#messages').html('<li id="messages">' + evt.data + '</li>');
            }
            ws.onclose = function(evt) {
	        $('#messages').append('<li id="messages">WebSocket connection closed.</li>');
            }
            $('#send').submit(function() {
                ws.send($('input:first').val());
                $('input:first').val('').focus();
                return false;
            });

	//ajax
      $('#ajax').submit(function(e) {
        var msg = $('li#messages').text();
        $.ajax({
            type: 'POST',
            url: '/page',
            data: "message=" + msg,
            success: function(response) {
                $('#ajaxP').html(response);
            }
        });
        e.preventDefault();
      });
});

index.jade

head
    meta charset="utf-8"
    title jQuerySample
    script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js")
    script(src="/static/js/client.js")

body
  h2 #{body}

  form#send(action='.')
    input(type="text" value="message")
    input(type="submit" value="Send")
  div#messages

  hr
  
  form#ajax(action="/page" method="post")
    input(type="submit" value="Post to IFTTT")

動作

開くとこんな塩梅。
上の方のメッセージは投稿で上書きされる形式

今回、受け取り先はIFTTTのWEB HOCK経由でメール受信です。
なのでこんな感じで回答がきます

参考もと

【jQuery】要素を指定するセレクタの使い方 まとめ | Web制作会社スタイル
jQuery入門道場 - 【HTML、テキスト、フォーム値の取得＆設定】
getElementById()メソッド(HTML 文書から指定された ID を与えられた要素ノードを抽出) - DOM リファレンス
PythonスクリプトからIFTTTのWebhookに投稿する - Bye Bye Moore
BottleでjQueryのPOSTアクションをうけとる - Bye Bye Moore
PythonスクリプトからIFTTTのWebhookに投稿する - Bye Bye Moore
BottleでWebsocketする - Bye Bye Moore