この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回はクライアント端末にて位置情報を取得し、サーバ側へ送信する処理について書きました。
今回はサーバ側にて、受け取った位置情報をwebsocket-railsを使い、別画面へPush通知する処理について
書きたいと思います。
websocket-railsによるPush送信
Push送信についても、前回と同じくwebsocket-railsを使用して行います。
処理を行うのは、前回見た、クライアントからのメッセージを受信するコントローラです。
Push送信についてはwebsocket-railsで簡単なPush通知を実装するを参考にしました。
app/controllers/location_controller.rb
class LocationController < WebsocketRails::BaseController def show puts message WebsocketRails[:location_channel].trigger "location", message end end [/ruby]
4行目でWebsocketRailsのtrigger()メソッドを呼び出し、受信したメッセージをそのまま送信しています。
前回書いたように、受信したメッセージは「message」変数に格納されています。
この時、チャンネル名には「location_channel」を、メッセージ名は「location」を設定しています。
後述するJavaScriptによる表示処理で、これらの名称を使用します。
JavaScriptによるメッセージの取得と表示
サーバ側よりPush送信されたメッセージをリアルタイムで表示するため
JavaScriptにてメッセージを取得し、表示する必要があります。
以下が、その処理と画面のソースです。
app/views/welcome/_location.html.erb
<div>
<div class="div-geolocation-header">緯度</div>
<div id="latitude">-</div>
<div class="div-geolocation-header">経度</div>
<div id="longitude">-</div>
<div class="div-geolocation-header">移動方向</div>
<div id="heading">-</div>
<div class="div-geolocation-header">移動速度</div>
<div id="speed">-</div>
</div>
app/assets/javascripts/welcome_show.js
var dispatcher = new WebSocketRails(location.host + '/websocket', true);
var channel = dispatcher.subscribe("location_channel");
channel.bind("location", function(message) {
// 緯度
document.querySelector('#latitude').textContent = message.latitude;
// 経度
document.querySelector('#longitude').textContent = message.longitude;
// 移動方向
document.querySelector('#heading').textContent = message.heading;
// 移動速度
document.querySelector('#speed').textContent = message.speed;
});
_location.html.erbについては、前回使用したものと同じです。
JavaScriptについては、1行目でWebSocketRailsのインスタンスを作成しています。これも前回と同じです。
3行目と5行目で、上記のサーバ側で指定したチャンネル名、メッセージ名を使用してPush送信されたメッセージを取得しています。
6行目以降で、取得したメッセージより緯度・経度等を表示しています。
まとめ
今回は2回に分けて書いてみました。
Geolocation API、websocket-railsを使い、位置情報を取得してPush通知を行う機能が
簡単に実現できました。