はじめに
この記事は chillSAP 夏の自由研究2020の記事として執筆しています
今回は、 SAPUI5 の API Reference を眺めていると WebSocket( sap.ui.core.ws.WebSocket )のライブラリを発見したので試してみました。
WebSocket とは？
WebSocket（ウェブソケット）は、コンピュータネットワーク用の通信規格の1つである。ウェブアプリケーションにおいて、双方向通信を実現するための技術規格である。2011年にRFC 6455として>最初の標準仕様が定義された。
難しいのでなるべく簡単に説明すると、
Webの世界でブラウザとサーバが通信をする場合には、ブラウザからの呼びかけに対してサーバが返事する仕組みでしたが
WebSocket を使用すると、サーバからブラウザに対して呼びかけをしてくれる仕組みが作れるということです。
今回のブツ
SAP Cloud Platform 上で WebSocketを使用した ブラウザChat を作ってみました。
仕組み
- ブラウザから SAP UI5 で準備したWebチャットを動かすと、 Webチャット は SAP Cloud Platform 上に nodejs で構築したチャットサーバと、 WebSocketで接続します。
- 接続中の Webチャット から発言すると、発言内容は チャットサーバへと送られます。
- チャットサーバは、Webチャットからの発言を受け取ると、接続中のすべてのWebチャット に対して受信した内容を返します。
- Webチャットは、チャットサーバからの通信を受け取ると、画面上へ受信した内容を表示します。
まとめ
送信したメッセージは、ほぼリアルタイムに相手側へ送られているのがご覧いただけると思います。
WebSocketを使わなくても、ポーリングや Comet を使用すれば似たようなことは実装できますが
ほぼリアルタイムの相互通信が簡単に実装出来るので、一度 WebSocket に興味を持っていただければと思います。
参考
- class sap.ui.core.ws.WebSocket - SAPUI5 SDK
- WebSocket - Wikipedia
- Simple chat server example using UI5 WebSocket
ここから先はソースコード
チャットサーバ実装
server.js
/*eslint no-console: 0*/"use strict";varWebSocketServer=require('ws').Server;varws=newWebSocketServer({port:process.env.PORT||8080});// 接続時に呼ばれるws.on('connection',function(socket){// クライアントからのデータ受信時に呼ばれるsocket.on('message',message=>{console.log('received: %s',message);// 受け取ったメッセージを接続中のクライアントへ返信ws.clients.forEach(client=>{client.send(message);});});socket.send(JSON.stringify({user:'chat server',text:'Hello from Server'}))// 切断時に呼ばれるsocket.on('close',function(){console.log('Disconnected from Server');});});Webチャット(クライアント)実装
View1.controller.js
sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/ws/WebSocket"],function(Controller,WebSocket){"use strict";returnController.extend("cli.client.controller.View1",{oModel:newsap.ui.model.json.JSONModel(),// チャットサーバへデータ送信 notify:function(user,text){varmsg=user+': '+text;varmsgAreaId="chatInfo";// 現在表示中のメッセージを取得varchatMsg=sap.ui.getCore().byId(msgAreaId).getValue();// var lastInfo = this.oModel.oData.chat;if(chatMsg.length>0){chatMsg+="\r\n";}chatMsg+=msg;sap.ui.getCore().byId(msgAreaId).setValue(chatMsg);},onAfterRendering:function(){varthisController=this;sap.ui.getCore().byId("userName").setValue("ななし");varurl="wss://チャットサーバ";varws=newsap.ui.core.ws.WebSocket(url);this.ws=ws;//接続時ws.attachOpen(function(oControlEvent){thisController.notify('system','connection opened...');});// エラー時ws.attachError(function(oControlEvent){thisController.notify('system','connection Error!');});//受信時ws.attachMessage(function(oControlEvent){vardata=jQuery.parseJSON(oControlEvent.getParameter('data'));thisController.notify(data.user,data.text);});//終了時ws.attachClose(function(attachClose){thisController.notify('system','Disconnected from Server');});},// 送信ボタン押下onSendMessage:function(oEvent){varuser=sap.ui.getCore().byId("userName").getValue();varmsg=sap.ui.getCore().byId("chatMsg").getValue();if(msg.length>0){this.ws.send(JSON.stringify({user:user,text:msg}));sap.ui.getCore().byId("chatMsg").setValue("");}}});});