Golang : Web(Javascript) to server-side websocket example
For this tutorial, we will explore how to write a HTML page with Javascript/JQuery that interface with server-side Golang service via Websocket. Also, this tutorial demonstrates the alternative way of posting data(apart from AJAX) to server-side and getting reply. (see also https://www.socketloop.com/tutorials/golang-jquery-ajax-post-data-to-server-and-send-data-back-to-client-example )
In the past, many gaming, chat, stock ticker or multi-user applications abused the HTTP protocol to poll the server for updates and at the same time upload notifications data back to the server as distinct HTTP calls. There are several problems that were encountered with this method. One of it is that the client-side is forced to maintain a mapping from the outgoing connections to the incoming connection to track replies.
To mitigate this problem without reinventing the entire HTTP protocol, Websocket is created as a simpler solution that enable applications to have bidirectional communication with server-side services in real time and works on port 80(http) and 443(https).
Here we go!
package main
import (
"fmt"
"github.com/gorilla/mux"
"golang.org/x/net/websocket"
"io"
"net/http"
)
func homeHandler(w http.ResponseWriter, r *http.Request) {
html := `<!DOCTYPE html>
<html>
<head>
<title>Javascript/JQuery/Golang and Websocket example</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
var ws = new WebSocket("ws://example.com:8080/reply"); // change example.com
var $ul = $('#msg-list');
$('#sendBtn').click(function(){
var data = $('#name').val();
ws.send(data);
console.log("Sending data to server via Webscoket :" + data);
$('<li>').text(data).appendTo($ul);
});
});
</script>
</head>
<body>
<input id="name" type="text" />
<input type="button" id="sendBtn" value="send"></input>
<ul id="msg-list"></ul>
</body></html>`
w.Write([]byte(fmt.Sprintf(html)))
}
func replyHandler(ws *websocket.Conn) {
io.Copy(ws, ws)
}
func main() {
mx := mux.NewRouter()
mx.HandleFunc("/", homeHandler)
// convert to Handler, otherwise compiler will report
// error : cannot use websocket.Handler(replyHandler) (type websocket.Handler)
mx.Handle("/reply", websocket.Handler(replyHandler))
http.ListenAndServe(":8080", mx)
}
NOTE : Do consider websocket protocol into your microservice architecture.
NOTE : The code example here is adapted from https://github.com/golang-samples/websocket/blob/master/simple/main.go
References :
See also : Golang : JQuery AJAX post data to server and send data back to client example
By Adam Ng
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Tutorials
+11.2k Golang : Post data with url.Values{}
+15k JavaScript/JQuery : Detect or intercept enter key pressed example
+12.5k Golang : Send data to /dev/null a.k.a blackhole with ioutil.Discard
+7.2k Golang : Individual and total number of words counter example
+4.4k Java : Generate multiplication table example
+10.5k Golang : Interfacing with PayPal's IPN(Instant Payment Notification) example
+7.3k Android Studio : How to detect camera, activate and capture example
+14.8k Golang : Basic authentication with .htpasswd file
+4.3k Golang : Valued expressions and functions example
+14.4k Golang : Send email with attachment(RFC2822) using Gmail API example
+8.7k Golang : Random integer with rand.Seed() within a given range
+17.7k Golang : Login and logout a user after password verification and redirect example