DXOpalからHTTPリクエストを送る

DXOpalによるゲーム作りをしていると、スコアランキングデータなど、外部にデータを保存しておきたいときがあります。ここではその手段としてHTTPリクエストによる外部データ読み出し、書き込みをやってみます。

GETでのデータ取得(基本形)

これは単純にBodyを受け取って表示する場合です。URLは適宜読み替えてあげてください。

require 'dxopal'
require 'native'

include DXOpal

def fetch_http(&block)
  xhr = `new XMLHttpRequest()`
  `xhr.open("GET", "http://hogehoge.jp/test.html", true)`

  `xhr.onload = function() {
    if (xhr.status == 200) {
      // var response = JSON.parse(xhr.responseText);
	  var response = xhr.responseText;
      #{block.call(`response`)}
    }
  }`

  `xhr.send()`
end

data = ""
fetch_http { data = _1 }

Window.bgcolor = C_BLACK
Window.loop do
  Window.draw_font(100, 100, data, Font.default, color: C_WHITE)
end

つまるところ、Opalの機能である生JSの援用によって表現できます。require nativeとありますがdxopalのインストールが済んでいれば別のGem等は要らないです。
ちなみに僕はJS苦手なんでメソッド部分はChatGPT君にお願いしたやつです。なんかdataの定義がいまいちですが、とりあえずこれでdataにHTTPで受け取ったデータを保持できます。

GETでのデータベースからの読み込み

ちょっと進化系。何らかのスクリプトでGetを受け取れるデータベースを用意し、その情報を取得する場合を考えます。例えば、HTTPの送信先から下表のようなテーブルを受け取るものとします。

ID	Name
1	太郎
2	花子

これをコンマ区切りの文字列として表示するなら、以下のようになります。

require 'dxopal'
require 'native'
require 'json'

include DXOpal

def fetch_db(&block)
  xhr = `new XMLHttpRequest()`
  `xhr.open("GET", "http://hogehoge.jp/fetch.php", true)`

  `xhr.onload = function() {
    if (xhr.status == 200) {
      // var response = JSON.parse(xhr.responseText);
	  var response = xhr.responseText;
      #{block.call(`response`)}
    }
  }`

  `xhr.send()`
end

lines = []
fetch_db { |res| lines = JSON.load res }

Window.load_resources do
	Window.bgcolor = C_BLACK
	
	Window.loop do
		lines.each.with_index do |(k, v), i|
			## あんまりJSON.loadがうまくいかなくて、下記ではだめ
			# Window.draw_font(0, 20*i, "key: #{k}, value: #{v}", Font.default, color: C_WHITE)
			
			## keyに全部入ってしまっていたので、以下で攻略
			Window.draw_font(0, 20*i, "#{k[:id]}, #{k[:name]}", Font.default, color: C_WHITE)
		end
	end
end

どうもJSONのコードがうまくいかなくて、keyに情報が集まってしまったため、上記のように回避しています。もっと良い方法はあるかもしれません。
ともあれこれで、スコアの記録を保持するデータベースなどといった、外部情報とのやり取りが可能になります。

---

TODO: POSTの場合