Web上で取得した緯度経度の値をサーバへ送りたい。

大学院生、javascript初心者です。
ubuntuを使っています。

Web上でマップの任意の地点をクリックし、緯度経度をサーバ側へ送り処理を行いたいというのが自分の目的です。

https://qiita.com/SOJO/items/d43a28a6fe27de3cc85c

こちらの記事を参考にさせていただき、任意の地点をクリックして緯度経度の取得までのコードの書き方を学ぶことができました。

サーバへの値の受け渡しには、教授からの指導のもと、以下のようなコードを使うことでできると知りました。（チャットを行った時のメッセージの受け渡しのコードで、変数がおかしいかもしれません。）

javascript
1$(() => {
2            const ws = new WebSocket("ws://localhost:8081/", ["test"]);
3            ws.onopen = () => {
4                ws.onmessage = (message) => {
5                    //サーバから受信
6                    $('<div>', {
7                        class: 'alert alert-primary',
8                        role: 'alert',
9                        text: message.data
10                    }).prependTo($('#main'));
11                };
12                
13                $('#chat-form').on('submit', () => {
14                    //サーバへ送信
15                    ws.send($('#chat-text').val());
16                    $('#chat-text').val("");
17                    return false;
18                });
19            }
20        });

これらを組み合わせてgooglemap上でクリックした時の緯度経度の値をサーバへ送りたいのですが、行き詰っています。

参考にさせて頂いたサイトのhtml上でのidの書き方が大事かなと考え、見様見真似でコードを書いてみたり、ボタンを増やしてクリックした際にサーバに送るようにしてみたりといろいろ試して見ましたが、うまく行きませんでした。

アドバイスや参考にできそうなサイトがあれば、ぜひ頂きたいです。
よろしくお願いします。

以下サーバ側の自分で現在書いたコードも載せます。
（今回はlatだけを受け取り、端末で表示することを目指しています。）

javascript
1const http = require('http'),
2    ws = require('ws'),
3    fs = require('fs'),
4    path = require('path'),
5    filename = path.join(__dirname, 'get_latlon.html');
6
7const wss = new ws.Server({ port: 8081 });
8
9wss.on('connection', (client) => {
10    client.on('lat', (lat_lng) => {
11        console.log('lat: %s', lat_lng);
12    });
13    client.send('Hello WebSocket World from server!');
14});
15
16fs.readFile(filename, 'binary', (err, filecontent) => {
17    http.createServer((request, response) => {
18        if (err) {
19            response.writeHead(404, { 'Content-Type': 'text/plain' });
20            response.write("404 Not Found\n");
21            response.end();
22        } else {
23            const header = {
24                'Access-Control-Allow-Origin': '*',
25                'Pragma': 'no-cache',
26                'Cache-Control': 'no-cache'
27            }
28            response.writeHead(200, header);
29            response.write(filecontent, 'binary');
30            response.end();
31        }
32    }).listen(8080);
33});

maisumakun

2019/06/23 13:04

WebSocketを経由させることは必須なのでしょうか？（リアルタイム性を求めるのでないなら、HTTP経由のほうがいろいろやりやすいかと思います）

kaki.k

2019/06/23 13:21

緯度経度を入手したあとにサーバ上でPyｔhonを使った処理を行おうと思っています。また、そのPythonもgooglemapapiでいろいろやるため処理が結局かかるため、教授からはサーバを立てたほうがいいと言われました。（Pythonとjavascriptの連携については一応できると聞いたのでとりあえず現在の問題に取り組んでいます）