HerokuにおけるWebSocketserverの立て方について

Herokuにて自分がローカルで行っていたページをデプロイしようとしています。

まず、おおざっぱに自分がやりたいことは自分はhtml上でmapを表示し緯度経度を入力、js上で受け取った緯度経度を用いて計算をおこない結果を返す、というアプリをHeroku上でやりたいというものです。（ローカルだとちゃんと動きます）

問題はhtmlでのWebSocketの立て方で

html
1function send_to_server() {
2
3            $(() => {
4
5                //問題箇所
6                const ws = new WebSocket("ws://localhost:8081:", ["test"]);
7
8                ws.onopen = () => {
9                    ws.onmessage = (message) => {
10                        var wsRes = message.data
11                        var base64img = "data:image/png;base64," + wsRes;
12                        console.log(base64img)
13                    };
14                }
15            });
16        }

上のws://localhost:8081:の部分はどうするべきなのかということです。
（js側では.listen(process.env.PORT || 8080);の書き方が肝だと見ました。）

Herokuの公式サイトや他の記事を見て使えるポートの確認とかいろいろ試しましたがうまくいかず、困っています。

よろしければ、解決方法をご享受頂きたいです。
よろしくお願いします。

一応参考として、自分のコードを一部省略し下に載せます。

javascript
1const http = require('http'),
2    ws = require('ws'),
3    fs = require('fs'),
4    path = require('path'),
5    filename = path.join(__dirname, 'RangeSpecification.html');
6
7const wss = new ws.Server({ port: 8081 });
8
9wss.on('connection', (client) => {
10    client.on('message', (message) => {
11        
12        const envelope = JSON.parse(message);
13        
14        console.log('received Polygon: %s', envelope.Polygon);
15
16        const NearBy = require('../GooglePlaceNearBy-master/index.js').NearBy
17
18        let option = {
19            'key': "＊＊＊＊＊",
20            'boundary': JSON.parse(envelope.Polygon) ,
21            'tag': "restaurant"
22        };
23        const nearBy = new NearBy(option);
24
25        var item_res = []
26    
27        nearBy.execute((err, argv, map, stats) => {
28            console.log("[done]");
29            console.log("[Stats]");
30            console.log("\t" + stats.nQueries + "\t# of Near By Searches");
31            console.log("\t" + stats.nVenues + "\t# of Unique Venues");
32            console.log("\t" + stats.nDuplicates + "\t# of Duplicated Venues");
33            console.log("\t" + stats.nOutsides + "\t# of Outside Venues");
34            console.log("[Place IDs]");
35            console.log("\t" + Object.keys(stats.venues).join("\n\t"));
36
37            var ffs = require('fs');
38
39            //ファイルの書き込み関数
40            function writeFile(path, data) {
41            ffs.writeFile(path, data, function (err) {
42                if (err) {
43                    throw err;
44                }
45            });
46            }
47
48            writeFile("0926test_placeid_res.txt", Object.keys(stats.venues).join("\n"));
49
50            item_res.push(Object.keys(stats.venues));
51
52            console.log(item_res)
53            console.log("restaurant place_id crawl !")
54              
55        });
56    });
57});
58
59fs.readFile(filename, 'binary', (err, filecontent) => {
60    http.createServer((request, response) => {
61        if (err) {
62            response.writeHead(404, { 'Content-Type': 'text/plain' });
63            response.write("404 Not Found\n");
64            response.end();
65        } else {
66            const header = {
67                'Access-Control-Allow-Origin': '*',
68                'Pragma': 'no-cache',
69                'Cache-Control': 'no-cache'
70            }
71            response.writeHead(200, header);
72            response.write(filecontent, 'binary');
73            response.end();
74        }
75    }).listen(process.env.PORT || 8080);
76});

html
1<!DOCTYPE html>
2</style>
3<html lang="ja">
4
5<head>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
9        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
10        crossorigin="" />
11
12　　//省略
13    
14    </style>
15</head>
16
17<body>
18    <div id="map"></div>
19    <div id="main"></div>
20    <input type="checkbox" id="scaleOnOff" name="scale">
21    <div id="scale" class="containe">
22        //省略
23    </div>
24    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
25        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
26        crossorigin="anonymous"></script>
27    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
28        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
29        crossorigin="anonymous"></script>
30    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
31        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
32        crossorigin="anonymous"></script>
33    <script defer>
34        let concave = null;
35        let markers = [];
36        let circles = [];
37        
38    //省略
39
40    </script>
41
42    <script>
43        function send_to_server() {
44
45            $(() => {
46
47                const ws = new WebSocket("ws://localhost:8081/", ["test"]);
48                
49                ws.onopen = () => {
50                    ws.onmessage = (message) => {
51
52                        var wsRes = message.data
53
54                        var base64img = "data:image/png;base64," + wsRes;
55
56                        console.log(base64img)
57
58                        //省略
59
60                    };
61
62
63                }
64            });
65        }
66
67    </script>
68</body>
69
70</html>

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

回答1件

ベストアンサー

こんにちは。

const HOST = location.origin.replace(/^http/, 'ws')
const ws = new WebSocket(HOST);

でどうでしょう？（サブプロトコルに"test" と添えられていますがこれは要らない）

投稿2019/10/26 00:42

suama

総合スコア1997

kaki.k

2019/10/28 05:36

返信ありがとうございます！実際Herokuopenして計算実行すると以下のようなエラーがでました。 (index):226 WebSocket connection to 'wss://＊＊＊.herokuapp.com/' failed: Error during WebSocket handshake: Unexpected response code: 200 前回のエラーとは変わったっぽいんで、一応解決？したのかなと思います！ちょっともう一回コード見なおしてみます！

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