【お店探しのWebAR】DjangoでWebSocket編

どんなアプリ？

おおもとの記事です。
【Django,A-frame】お店探しのWebARを作りました。

対象の読者

一応、下記前提で記事を書いていきますが、難しいことは書いてないので分からない用語があれば調べてください。

• pythonの初歩的な用語、文法を知っている人向け
• Djangoを使ったことがある人向け

今回の内容

websocketでサーバ・ブラウザ間の送受信

ブラウザ側

WebSocketのインスタンスを生成します。

aframe_ctrl.js

var ws = new WebSocket('wss://' + window.location.host + '/ws/');

JSON形式でサーバからデータを受け取ります。
受信するごとに更新されます。

aframe_ctrl.js

ws.onmessage = function(e) {
  var data = JSON.parse(e.data);
}

JSON形式でサーバにデータを送信します。
末尾の10000[ms]で10秒に一回送信するよう設定しています。送信データは緯度経度です。
（端末の緯度経度の取得がサーバーからだと複雑な処理になりそうだったため）

aframe_ctrl.js

  $(function() {
    setInterval(function(){
      const sendData = {
        message : my_latitude + "," + my_longitude
      }
      ws.send(JSON.stringify(sendData));
      },10000);
  });

サーバ側

基本的な設定は下記サイトを参考にさせていただきました。
http://engmng.blog.fc2.com/blog-entry-110.html

一個注意することがあります。
Websocketのルーティングを設定する時、末尾にASGIとして使いますよって明示する必要があります。

routing.py

websocket_urlpatterns = [
    path('ws/', consumers.TestConsumer.as_asgi()),
]

ここではブラウザからJSONでデータを受け取り、緯度経度を抽出してHotPepperAPIを介してお店情報を取得します。
取得したお店情報をJSON形式にしてsendでブラウザに送ります。

consurmers.py

    def receive(self, text_data=None):
        if text_data != None:
            text_data_json = json.loads(text_data)

            _location = text_data_json['message']
            if "," in _location:
                shop_num = 5
               # ブラウザから受信した緯度経度からお店情報を取得する
                _array_location = _location.split(",")
                lat = _array_location[0]
                lng = _array_location[1]
                HP_data = HotpepperAPI(lat_st=lat,lng_st=lng )
　　　　　　　　　　・・・

                shop_array[2] = "お店を検索中…"
                for i in range(0,shop_num):
                    try:
                        shop_array[i] = HP_data['name'][i]
                        lat_array[i] = HP_data["lat"][i]
                        lng_array[i] = HP_data["lng"][i]
                        ・・・
                    except:
                        pass

            else:
                self.name = 'Failed:location'

            self.send(text_data=json.dumps({
                'message0':shop_array[0],
                "shop_lat0":lat_array[0],
                "shop_lng0":lng_array[0],
                "shop_dis0":dis_array[0],
                "catch0":appeal[0],
                "urls0":shop_urls[0],
　　　・・・