From 257bd5c4c9fa586f059673b1695900bc4feea3c6 Mon Sep 17 00:00:00 2001 From: Tyler Breisacher Date: Sun, 5 Feb 2023 10:29:41 -0800 Subject: [PATCH] Add a javascript example for the browser --- README.md | 18 +++++++++++++----- javascript-browser/index.html | 9 +++++++++ javascript-browser/index.js | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 javascript-browser/index.html create mode 100644 javascript-browser/index.js diff --git a/README.md b/README.md index 38a902f..475e4f5 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,33 @@ -# Description +# Description + This repository contains examples of using the AISStream API in Golang, Python, JavaScript and many more languages. ## Prerequisites + Before you can use these examples, you will need to sign up for an AISStream API key at [aisstream.io](https://aisstream.io/authenticate). ### Golang Example + To run the Golang example, you will need to have Go installed on your system. Clone the repository: `git clone https://github.com/aisstream/example`. Navigate to the golang directory: `cd example/golang`. Install the dependencies: `go get -d`. Replace "" in the main.go file with your AISStream API key. Run the example: `go run main.go`. - - + ### Python Example + To run the Python example, you will need to have Python 3 installed on your system. Clone the repository: `git clone https://github.com/aisstream/example`. Navigate to the python directory: `cd example/python`. Install the dependencies: `python setup.py install`. Replace "" in the main.py file with your AISStream API key. Run the example: python main.py. - + ### JavaScript Example + To run the JavaScript example, you will need to have Node.js installed on your system. Clone the repository: `git clone https://github.com/aisstream/example`. Navigate to the javascript directory: `cd example/javascript`. Install the dependencies: `npm install`. Replace "" in the index.js file with your AISStream API key.. Run the example: `node index.js`. +### JavaScript Browser Example + +Clone the repository: `git clone https://github.com/aisstream/example`. Navigate to the javascript-browser directory: `cd example/javascript-browser`. Run a basic HTTP server, such as: `python -m SimpleHTTPServer`. Replace "" in the index.js file with your AISStream API key. Open the page `localhost:8000` in your browser. + ### Additional Resources - + For more information on the AISStream API, visit the [AISStream documentation](https://aisstream.io/documentation). diff --git a/javascript-browser/index.html b/javascript-browser/index.html new file mode 100644 index 0000000..cccb329 --- /dev/null +++ b/javascript-browser/index.html @@ -0,0 +1,9 @@ + + + + +
+
+ + + diff --git a/javascript-browser/index.js b/javascript-browser/index.js new file mode 100644 index 0000000..3f9c886 --- /dev/null +++ b/javascript-browser/index.js @@ -0,0 +1,35 @@ +const container = document.getElementById("position-data"); + +const socket = new WebSocket("wss://stream.aisstream.io/v0/stream"); + +socket.onopen = function (event) { + console.log("socket is open", event); + const subscriptionMessage = { + Apikey: "", + BoundingBoxes: [ + [ + [-180, -90], + [180, 90], + ], + ], + }; + socket.send(JSON.stringify(subscriptionMessage)); +}; + +socket.onmessage = function (event) { + const aisMessage = JSON.parse(event.data); + if (aisMessage["MessageType"] === "PositionReport") { + let positionReport = aisMessage["Message"]["PositionReport"]; + const positionMessage = `ShipId: ${positionReport["UserID"]} Latitude: ${positionReport["Latitude"]} Latitude: ${positionReport["Longitude"]}`; + console.log(positionMessage); + const span = document.createElement("span"); + span.innerText = positionMessage; + container.appendChild(span); + } +}; + +socket.onclose = function (event) { + console.log("socket is closed", event); +}; + +console.log("created socket", socket);