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
+6k Golang : Null and nil value
+9.8k Golang : Web routing/multiplex example
+4.9k Golang : How to search a list of records or data structures
+22.8k Golang : Daemonizing a simple web server process example
+18k Mac OSX : Homebrew and Golang
+5k Golang : Function as an argument type example
+4.1k Linux/Unix/MacOSX : Find out which application is listening to port 80 or use which IP version
+5.3k Golang : Map within a map example
+5.2k Javascript : Generate random key with specific length
+19.4k Golang : Convert PNG transparent background image to JPG or JPEG image
+6.5k Golang : Handling Yes No Quit query input