golang の templateを使って、PrumeClusterと取り敢えず繋いでみた
ようやく動いた。疲れた。JSONを送り込むのは、明日以降ね。
忘備録
カレントディレクトリの中にdistというディレクトリを作って、LeafletStyleSheet.css PruneCluster.d.ts PruneCluster.js を放り込んだカレントディレクトリの中にLeafletStyleSheet.css,PruneCluster.d.ts,PruneCluster.js,examples.cssを放り込んでおいた。- 上記はあまり意味なかったらしい(プログラムの下を御参照)。
使い方は、
>go run server5.go
http://localhost:8080
で起動する。
/*
// server5.go
// Copyright 2015 The Gorilla WebSocket Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.
// +build ignore
// 使い方
// go run server5.go (適当なシェルから)
// http://localhost:8080 (ブラウザ起動)
*/
package main
import (
"flag"
"html/template"
"log"
"net/http"
"github.com/gorilla/websocket"
)
// GetLoc GetLoc
type GetLoc struct {
ID int `json:"id"`
Lat float64 `json:"lat"`
Lng float64 `json:"lng"`
//Address string `json:"address"`
}
//var addr = flag.String("addr", "localhost:8080", "http service address")
var addr = flag.String("addr", "0.0.0.0:8080", "http service address") // テスト
var upgrader = websocket.Upgrader{} // use default options
func echo(w http.ResponseWriter, r *http.Request) {
c, err := upgrader.Upgrade(w, r, nil) // cはサーバのコネクション
if err != nil {
log.Print("upgrade:", err)
return
}
defer c.Close()
for {
//mt, message, err := c.ReadMessage() // クライアントからのメッセージの受信(mtはクライアント識別子)
_, _, err := c.ReadMessage() // クライアントからのメッセージの受信(mtはクライアント識別子)
if err != nil {
log.Println("read:", err)
break
}
// JSONを無理やり入れてみた
gl := GetLoc{
ID: 1,
Lat: 35.653976,
Lng: 139.796842,
}
//log.Printf("recv_serv: %s", gl)
//err = c.WriteJSON(mt, gl)
err = c.WriteJSON(gl)
if err != nil {
log.Println("write:", err)
break
}
/*
log.Printf("recv_serv: %s", message) // 受信したメッセージの表示
err = c.WriteMessage(mt, message) // 受信したメッセージの返送
if err != nil {
log.Println("write:", err)
break
}
*/
}
}
func home(w http.ResponseWriter, r *http.Request) {
//homeTemplate.Execute(w, "ws://"+r.Host+"/echo")
homeTemplate.Execute(w, "")
}
func main() {
flag.Parse()
log.SetFlags(0)
http.HandleFunc("/echo", echo) // echo関数を登録 (サーバとして必要)
http.HandleFunc("/", home) // home関数を登録
log.Fatal(http.ListenAndServe(*addr, nil)) // localhost:8080で起動をセット
}
var homeTemplate = template.Must(template.New("").Parse(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PruneCluster - Realworld 50k</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<script src="PruneCluster.js"></script>
<link rel="stylesheet" href="examples.css"/>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map", {
attributionControl: false,
zoomControl: false
}).setView(new L.LatLng(35.654543, 139.795534), 18);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
detectRetina: true,
maxNativeZoom: 18
}).addTo(map);
var leafletView = new PruneClusterForLeaflet(1,1); // (120,20)がデフォルト
var size = 100;
var markers = [];
for (var i = 0; i < size; ++i) {
var marker = new PruneCluster.Marker(35.654543 + (Math.random() - 0.5) * 0.00001 * size, 139.795534 + (Math.random() - 0.5) * 0.00002 * size);
markers.push(marker);
leafletView.RegisterMarker(marker);
}
window.setInterval(function () {
for (i = 0; i < size / 2; ++i) {
var coef = i < size / 8 ? 10 : 1;
var ll = markers[i].position;
ll.lat += (Math.random() - 0.5) * 0.00001 * coef;
ll.lng += (Math.random() - 0.5) * 0.00002 * coef;
}
leafletView.ProcessView();
}, 500);
map.addLayer(leafletView);
</script>
</body>
</html>
`))ところが、今朝、PC断ち上げて再起動させてみたところ、昨日の状況に戻ってしまいました。
試しに、自分のサーバ(kobore.net)に、PruneCluster.jsとexamples.cssをアップして、さらにdistというディレクトリ掘って、LeafletStyleSheet.cssを放りこんでみたら動きました。
<script src="PruneCluster.js"></script>
→ <script src="http://kobore.net/PruneCluster.js"></script>
<link rel="stylesheet" href="examples.css"/>
→ <link rel="stylesheet" href="http://kobore.net/examples.css"/>
まあ、いずれ修正するとして、動くならなんでも良いので、このまま進めます。