やりたい事

複数人で１つのwebサイト（自前）をブラウズしているしているものとする
そのサイトではキーを打つとその一文字が画面に表示される（下にコードを載せます）
誰かがキーを打つと、そのサイトを見ている全員の画面がリアルタイムに書き換わる

実現方法について考えたこと

webページのローカルに読み書き可能なファイルを用意
javascriptでajaxを使って、打たれたキーをファイルに書き込む
ブラウザでは一定間隔でそのファイルを読み込み、画面にその一文字を表示する

この方法の難点

一定間隔でしか読みに行かないのでリアルタイム感が損なわれる
何もしていない時でも読みに行くので不要なトラフィックが生じる

教えていただきたいこと

ファイルに書き込んで一定間隔で読む以外のスマートな方法があれば教えていただきたいです
方法そのものでなくても、このキーワードでググれとかでも歓迎です

自分一人でやる場合用に書いたhtml

<!DOCTYPE html>
<html>
<head>
    <title>share character</title>
    <style>
        #container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            font-size: 96pt;
        }
    </style>
</head>
<body>
    <div id="container">hit key!</div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <script>
        $(function() {
            $(window).on("keydown", function(e) {
                $("#container").text(e.key);
            })
        });
    </script>
</body>
</html>

m.ts10806

2019/12/31 04:08

１文字ずつリアルタイムで送信するメリットってどこにあると考えますか？入力途中とか確定前の文字を送信されても誰も嬉しくないのでは。

taro_nii_chan

2019/12/31 04:42

チャットをしたい訳ではないのです。今やりたいのはキーを打った瞬間それを見ている人全員にそれが伝わること。それが仕様なのです。もちろんそれが出来たらそれを応用してやりたい事はあるのですが、問題の単純化のため、現在はそれを仕様としています。

行動規範の内容に同意します

回答2件

ベストアンサー

おそらくあなたがやりたいことはリアルタイムの双方向通信です。
それをブラウザで実行するにはWebsocketという技術を使用するのが一般的だと思うので、調べてみてください。
他回答者様がおっしゃってるfirebaseでも、可能だとおもうので、好きな方を選択してください。
どちらにせよ、他人とデータを共有するためにはサーバーが必要になるので、最低限の環境構築やサーバーサイド言語の知識が必要になると思います。

追記
どちらを選ぶかの参考に。
上でも言ったとおり、他人とのデータ共有にはサーバーの存在が必須なので、
Websocketサーバーとして動かすためのPCを用意する必要があります。
そのための現代的な方法としてはAWSやレンタルサーバーのような、ただのコンピューターを借りて自分でイチからサーバーにしていく方法と、
Firebaseのように、予め用意してくれてるシステムを使って手っ取り早く必要な機能を得る方法があります。
こういったことができるサービスを、IaaS、PaaS、SaaSなどというので、気になる場合は調べてみてください。

なので、今後似たようなことをする予定がない場合や、いつもFirebaseを使えるような状況であればFirebaseで実装したほうが手っ取り早いです。
しかし、スキルの向上を目的としていたり、今後もいろんな環境で開発していくことを想定するなら、
Websocketを導入するためのライブラリは様々なサーバーサイド言語用に用意されているので、
Websocketを学んだ方が汎用的です。

投稿2019/12/31 08:01

編集2019/12/31 08:18

H40831

総合スコア975

taro_nii_chan

2019/12/31 08:03

firebase について調べてたところでしたが、 Websocket についても調べてみます。情報ありがとうございます。

H40831

2019/12/31 08:19

学習意欲が高そうだとお見受けしたので、余計なお世話かもしれませんが、どちらを選択すべきかの参考情報を追記させていただきました。

taro_nii_chan

2019/12/31 08:50

勉強になります。 https://www.sejuku.net/blog/70583 ここを参考に２つのタブ間で双方向通信をしようとして動かず、コードをよく見て動かない理由を納得したのですが、それは別質問としたほうがよろしいでしょうか？特に問題がなさそうならそうしようかと思っております。

taro_nii_chan

2019/12/31 08:51

もしくはもうちょっとしばらく勉強してからがよろしいでしょうか？

H40831

2019/12/31 08:57

ちょっとよくわかりません。納得したのなら質問しなくていいと思いますが… 調べてすぐに理解できるような話でもないと思うので、きちんと勉強してみてはいかがでしょうか？それでもわからないことがあるなら、別の話題になってしまうので、別質問にしたほうがいいと思います。

taro_nii_chan

2019/12/31 09:16

動かない理由は分かったけど、それをどうすれば動くようになるのか分からなかったので質問しようかと言う意味でした。言葉足らずですみません。落ち着いて取り組みたいと思います。

H40831

2019/12/31 09:24 編集

提示された記事は「ただし、サーバー側のプログラムも必要になるので、今回はフロントエンド側のJavaScriptプログラミングにフォーカスを当てて解説をしていきます。」と書いてあるとおり、サーバー側の話は一切でていないようですので、全てを作る前提での説明ではなく、あらかじめWebsocketサーバーが用意されている前提での説明になります。

行動規範の内容に同意します