websocketとworkerについて

websocketとworkerについて質問です。

現在index.phpで作ったworkerをsochk.jsに作成しています。
そこからself.importScripts('worker2.js');でworker2を読み込みそこでwebsockeの接続しています。```javascript
コード

index.php
// Workerを生成する
  const worker = new Worker('spchk.js');

sochk.js
self.importScripts('worker2.js');

worker2.js

function test () {

  // create a new WebSocket object.
  var wsUri = "ho://xxx.xxx.xxx/";
  websocket = new WebSocket(wsUri);

  websocket.onopen = function () {
    websocket.send('Ping');
  };

  // Log errors
  websocket.onerror = function (error) {
    console.log('WebSocket Error ' + error);
  };

  // Log messages from the server
  websocket.onmessage = function (e) {
    result = e.data;
    console.log('Server: ' + result);
    return result;
  };


}


この時、websocket.onmessageにresultの結果を返して
importScriptsをしたsochk.jsにresultを返したたいのですが、どのようにすればいいでしょうか？

まだjavascriptを勉強中なので、意味不明な質問ですみません。

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

回答1件

ベストアンサー

index.htmlからspchk.jsをワーカーとして呼び出し、さらにspchk.jsからworker2.jsをワーカーで呼び出している状態で、worker2.jsからspchk.jsへデータを受け渡し、spchk.jsからindex.htmlへデータを受け渡す。サンプルプログラムを以下に作成してみたので参考にしてください。

参考
Web Worker を使用する
 ワーカーについて（Web Workers）

Workerで値を受け渡す方法
index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>test</p>
    <script>
        const worker = new Worker('spchk.js');
        worker.addEventListener("message" , function (e){
            console.log("spchk.jsより",e.data);
        });
    </script>
</body>
</html>

spchk.js

//受取用データ
var result = "";

this.self.addEventListener("message" , function (e){
    result = e.data
    this.self.postMessage(result);
});
self.importScripts('worker2.js');

worker2.js

//なんらかのイベント発生
setTimeout(function(){
    this.self.postMessage({"test":"test data"});
},1000);

投稿2017/09/06 04:26

編集2017/09/06 06:20

aro10

総合スコア4106

mobuocity

2017/09/06 04:42

返信ありがとうございます！ >値を設定用のメソッドをworker(sochk.js)に作成してください。のとこで、メソッドを作成というのは worker.result = ""; というのを作って websocket.onmessageの中で worker.result(result); というようにするということでしょうか？

aro10

2017/09/06 04:52

spchk.jsの中のオブジェクトに対して、プロパティかメソッドを作成してください。ただインスタンス作成後のworkerに対して、 worker.result = ""; とすればこのworkerインスタンス中に限りresultのプロパティが生えるので、 worker.result = resultでもひとまず代入はできるかと思います。 sochk.jsがライブラリであれば、そのライブラリのヘルプなりで値を設定するメソッド等があるかを参照してみてください。

mobuocity

2017/09/06 05:16

大変申し訳ございません。素直に言うと、半分も理解できていません。。。 spchk.jsの中のオブジェクトというのは index.phpで作成したworkerオブジェクトのことでしょうか？

aro10

2017/09/06 05:51

コードが一つになっていたので別々のファイルとわからず勘違いしていたかもしれません。少しコードを動かして試してみます。

mobuocity

2017/09/06 06:05

ありがとうございます！自分も試してみます！

aro10

2017/09/06 06:25 編集

最初の回答は、Workerについての回答になっていなかったので参考ページを元に、データを受け渡す最小限のプログラムを作成してみました。 worker2.jsでthis.self.postMessageを利用して、spchk.jsにデータを伝えます。そしてspchk.jsからさらにindex.htmlに値を伝えています。一度動かしてみてください。この仕組みを質問のコードに組み込んで、websocket.onmessage内で、postMessageを行えば解決するかと思います。

mobuocity

2017/09/06 06:41

おお！動きました！. worker2.jsのsendで設定しているデータからもできましたこれはworker2.jsの送られたデータをpostMessageでspchk.jsで受け取り受け取ったデータをresultに格納した後、またpostMessageでindex.phpに返しているということですよね！ this.self.postMessageは初めて見ました

aro10

2017/09/06 06:45

ワーカーは別空間になるので、self変数で自身のスコープを管理しているみたいです。

mobuocity

2017/09/06 07:08

なるほど、難しいですけどおもしろいですね！頑張って、websocketとworker勉強していきます! ベストアンサーにさせてもらいました！ありがとうございました！

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