WebSocketを使って一覧をリアルタイム更新

Legacy_Account1740 · 2020 年 8 月 18 日午前 1:13

レコードが追加・編集されたら一覧を自動更新して欲しいという要望は多いのではないかと思います．今回は，WebSocketを使って一覧をリアルタイム更新するサンプルを紹介します．

デモ

レコードが追加・編集されたら，カスタマイズビューをリアルタイム更新します．

今回は，ローカルサーバーでの実装例をご紹介します．
※実務で利用する場合は，公開サーバーを立てる必要があります．

ローカルサーバーの準備

環境

Node.jsが必要です．

作成するファイル

下記ファイルを全て同一ディレクトリに設置します． sample.jsの7行目の「columns」は，ご自身のアプリに合わせて変更が必要です．

・package.json
・index.js
・sample.js
・localhost.pem
・localhost-key.pem

・package.json

{"dependencies": {"express":"^4.15.2","https":"^1.0.0","socket.io":"^1.7.3"},"scripts": {"start":"node index.js"},"license":"MIT"}

・index.js

constapp=require('express')();consthttps=require('https');constfs=require('fs');constssl\_server\_key='localhost-key.pem';constssl\_server\_crt='localhost.pem';constport=3000;constfile='sample.js';app.get('/',(req,res)=\>{res.sendFile(`${\_\_dirname}/${file}`);});constserver=https.createServer({key:fs.readFileSync(ssl\_server\_key),cert:fs.readFileSync(ssl\_server\_crt)},app).listen(port);constio=require('socket.io')(server);io.on('connection',(socket)=\>{socket.on('add',(record)=\>{io.emit('add',record);});socket.on('update',(record)=\>{io.emit('update',record);});});

・sample.js
7行目の「columns」は，ご自身のアプリに合わせて変更が必要です．

(function(){"use strict";varsocketUrl='https://localhost:3000';kintone.events.on(['app.record.index.show',],function(event){if(event.viewName!=='リアルタイム更新')return;varcolumns=[//一覧に表示するフィールドのフィルドコード'数値','文字列\_\_1行\_',];varwrapperId='realtime-view';varclient=newKintoneRestAPIClient();vartableManager=newTableManager(columns);kintone.Promise.all([client.app.getFormFields({app:kintone.app.getId()}).then(function(formFields){tableManager.setFormFields(formFields);}),client.record.getAllRecordsWithCursor({app:kintone.app.getId()}).then(function(records){tableManager.setInitialRecords(records);}),]).then(function(){document.getElementById(wrapperId).appendChild(tableManager.render());});varsocket=io.connect(socketUrl);socket.on('add',function(record){toastr.info('$id: '+record.$id.value,'レコードが追加されました．');tableManager.addRecord(record);});socket.on('update',function(record){toastr.info('$id: '+record.$id.value,'レコードが更新されました．');tableManager.updateRecord(record);});});kintone.events.on(['app.record.create.submit.success','app.record.edit.submit.success',],function(event){vartype=event.type==='app.record.create.submit.success'?'add':'update';varsocket=io.connect(socketUrl);socket.emit(type,event.record);returnnewkintone.Promise(function(resolve){socket.on(type,function(){resolve();});});});varTableManager=(function(columns){varTableManager=function(columns){this.columns=columns;this.table=document.createElement('table');this.thead=document.createElement('thead');this.tbody=document.createElement('tbody');this.table.appendChild(this.thead);this.table.appendChild(this.tbody);}TableManager.prototype={render:function(){returnthis.table;},setFormFields:function(formFields){this.thead.innerHTML='';vartr=document.createElement('tr');tr.innerHTML='\<th\>$id\</th\>';this.columns.forEach(function(column){varth=document.createElement('th');th.innerText=formFields.properties[column].label;tr.appendChild(th);});this.thead.appendChild(tr);},createRowContent:function(record){varfragment=document.createDocumentFragment();this.columns.forEach(function(column){vartd=document.createElement('td');td.innerText=record[column].value;fragment.appendChild(td);});returnfragment;},createRow:function(record){varid=record.$id.value;vartr=document.createElement('tr');tr.id='record-'+id;tr.innerHTML='\<td\>\<a href="show#record='+id+'"\>'+id+'\</a\>\</td\>';tr.appendChild(this.createRowContent(record));returntr;},updateRow:function(record){varid=record.$id.value;vartr=document.getElementById('record-'+id);tr.innerHTML='\<td\>\<a href="show#record='+id+'"\>'+id+'\</a\>\</td\>';tr.appendChild(this.createRowContent(record));},setInitialRecords:function(records){var\_this=this;this.tbody.innerHTML='';varfragment=document.createDocumentFragment();records.forEach(function(record){fragment.appendChild(\_this.createRow(record));});this.tbody.appendChild(fragment);},addRecord:function(record){this.tbody.insertBefore(this.createRow(record),this.tbody.firstChild);},updateRecord:function(record){this.updateRow(record);}}returnTableManager;})();})();

・localhost.pem, localhost-key.pem

SSLサーバ証明書ファイルと鍵ファイル．「https localhost 証明書」などでググると作り方が出てきます．

依存パッケージのインストール

ファイルを設置したディレクトリで下記コマンドを実行します．

npm install

ローカルサーバーの起動

ファイルを設置したディレクトリで下記コマンドを実行します．

npm run start

kintoneの設定

カスタマイズビュー(一覧名: リアルタイム更新)

\<divid="realtime-view"\>\</div\>

JavaScript

下記ファイルを順に読み込みます．

・https://js.cybozu.com/kintone-rest-api-client/1.4.2/KintoneRestAPIClient.min.js
・https://js.cybozu.com/jquery/3.5.1/jquery.min.js
・https://js.cybozu.com/toastr/2.1.4/toastr.min.js
・https://localhost:3000/socket.io/socket.io.js
・https://localhost:3000/

CSS