設計
- NuxtベースアプリケーションからSlackに通知する機能を実装したい。
- 定期的な自動再送機能もほしい。
- トークンをNuxt側に置くのはちょっと...
そんな要件を満たすためには、Nuxtからサーバーを経由するのもありかなという感じで作成。
必要なもの
- Nuxtアプリケーション
- Node.js (当方Version 13.2.0)
- 設定済みSlack API (トークンとBot Token Scopesにてchat:write権限が必要。#generalに参加済み）
Nuxtでの実装
求められるものは
1. メッセージ入力
2. 宛先入力
3. 再送間隔 or 再送しないの入力
4. 設定内容のPOST
とりあえず上記の4つを実装すれば最低限機能は満たせそうなので書いていく。
見た目はこの際捨て置く。
またquerystringを使っているので未インストールなら
npm install --save querystring
以下、コード。
<template><divclass="create-post"><inputtype="text"v-model="message"id="message"><inputtype="text"v-model="channel"id="channel"><inputtype="text"v-model="schedule"id="schedule"><buttonv-on:click="send">送信
</button></div></template><script>importquerystringfrom"querystring"exportdefault{data(){return{message:'',channel:'',schedule:'none'}},methods:{asyncsend(){letjson_data={message:this.$data.message,channel:this.$data.channel,schedule:this.$data.schedule};constresponse=awaitthis.$axios.$post('/test/rest',querystring.stringify(json_data));}}}</script><stylescoped>.create-post{width:30%;height:200px;padding-left:200px;}#message{margin-top:10%;}#channel{margin-top:10%;}#schedule{margin-top:10%;}</style>そうするとこのようなページが出来上がる
今回、NuxtからサーバーにPOSTするために@nuxtjs/axiosを使用している。
詳しくはご自分で調べてほしいのだが、使用する際、nuxt.confing.jsにて以下の文を編集・追加している。
modules:['@nuxtjs/axios',],axios:{proxy:true},proxy:{'/test/':{target:'http://0.0.0.0:3000/',pathRewrite:{'^/test/':''}}},このように設定することでCORSを簡単に解決することができる。
クロスオリジンリソースを共有するには？
サーバーの用意
サーバーでは次のような処理を行いたい。
1. HTTP Requestを受けとる
2. 中身のデータからメッセージとあて先、定期再送情報を取り出す
3. それに合わせてSlackに通知する
それではコードを書いていく。
これにあたって、以下の記事やサイトを参考にさせていただいた。
Nodejs HTTP/HTTPS サーバーとクライアントのコーディングパターン
【Node.js】Slack APIを使用してメッセージを送信する
Node.jsで定期実行メモ
node-cron npm
node-fetch npm
consthttp=require('http');constfetch=require('node-fetch');constcron=require('node-cron');constqueryString=require("querystring");constStringDecoder=require("string_decoder").StringDecoder;constDecoder=newStringDecoder('utf8');letserver=http.createServer();asyncfunctionpostToSlack(token,msg,channel){const{WebClient}=require('@slack/web-api');constclient=newWebClient(token);constparams={channel:channel,text:msg};awaitclient.chat.postMessage(params);}lettasks=[];server.on('request',function(req,res){req.on('data',asyncfunction(chunk){letjson=JSON.parse(JSON.stringify(queryString.parse(Decoder.write(chunk))));if(json.schedule==='none'){//スケジュール指定がない場合awaitpostToSlack('your token here',json.message,json.channel);}else{//ある場合lettask=cron.schedule(json.schedule,async()=>{awaitpostToSlack('your token here',json.message,json.channel);});tasks.push(['start',task]);}letreturn_json={state:true,};res.writeHead(200,{'Content-Type':'application/json'});letreplyData=queryString.stringify(return_json);res.write(replyData);res.end();});});server.listen(3000);実際に試す
Nuxtのページで文章とあて先を入力して送信。
そしてSlackに通知が来た。
定期実行も確認
以上、実装完了とす。
感想
エラー処理を全く実装していないので怖い。
APIが用意されていると楽。
あとはSlackに限らず通知できるように拡張できそう。
おわりに
お読みいただきありがとうございました。なにか間違いがございましたらコメントへよろしくお願いします。