update the nantive-messages(only) example to the latest websocket (minimum changes, the idea is the same) and misc

Former-commit-id: 9598319bc13e8a383114c37f4da84f337ab47b22

_examples/websocket/native-messages/main.go

@@ -1,21 +1,13 @@
 package main
 
 import (
-	"fmt"
+	"log"
 
 	"github.com/kataras/iris"
 
 	"github.com/kataras/iris/websocket"
 )
 
-/* Native messages no need to import the iris-ws.js to the ./templates.client.html
-Use of: OnMessage and EmitMessage.
-
-
-NOTICE: IF YOU HAVE RAN THE PREVIOUS EXAMPLES YOU HAVE TO CLEAR YOUR BROWSER's CACHE
-BECAUSE chat.js is different than the CACHED. OTHERWISE YOU WILL GET Ws is undefined from the browser's console, because it will use the cached.
-*/
-
 type clientPage struct {
 	Title string
 	Host  string
@@ -26,36 +18,43 @@ func main() {
 
 	app.RegisterView(iris.HTML("./templates", ".html")) // select the html engine to serve templates
 
-	ws := websocket.New(websocket.Config{
-		// to enable binary messages (useful for protobuf):
-		// BinaryMessages: true,
+	// Almost all features of neffos are disabled because no custom message can pass
+	// when app expects to accept and send only raw websocket native messages.
+	// When only allow native messages is a fact?
+	// When the registered namespace is just one and it's empty
+	// and contains only one registered event which is the `OnNativeMessage`.
+	// When `Events{...}` is used instead of `Namespaces{ "namespaceName": Events{...}}`
+	// then the namespace is empty "".
+	ws := websocket.New(websocket.DefaultGorillaUpgrader, websocket.Events{
+		websocket.OnNativeMessage: func(nsConn *websocket.NSConn, msg websocket.Message) error {
+			log.Printf("Server got: %s from [%s]", msg.Body, nsConn.Conn.ID())
+
+			nsConn.Conn.Server().Broadcast(nsConn, msg)
+			return nil
+		},
 	})
 
+	ws.OnConnect = func(c *websocket.Conn) error {
+		log.Printf("[%s] Connected to server!", c.ID())
+		return nil
+	}
+
+	ws.OnDisconnect = func(c *websocket.Conn) {
+		log.Printf("[%s] Disconnected from server", c.ID())
+	}
+
+	app.HandleDir("/js", "./static/js") // serve our custom javascript code.
+
 	// register the server on an endpoint.
 	// see the inline javascript code i the websockets.html, this endpoint is used to connect to the server.
-	app.Get("/my_endpoint", ws.Handler())
-
-	app.HandleDir("/js", "./static/js") // serve our custom javascript code
+	app.Get("/my_endpoint", websocket.Handler(ws))
 
 	app.Get("/", func(ctx iris.Context) {
-		ctx.ViewData("", clientPage{"Client Page", "localhost:8080"})
-		ctx.View("client.html")
-	})
-
-	ws.OnConnection(func(c websocket.Connection) {
-
-		c.OnMessage(func(data []byte) {
-			message := string(data)
-			c.To(websocket.Broadcast).EmitMessage([]byte("Message from: " + c.ID() + "-> " + message)) // broadcast to all clients except this
-			c.EmitMessage([]byte("Me: " + message))                                                    // writes to itself
-		})
-
-		c.OnDisconnect(func() {
-			fmt.Printf("\nConnection with ID: %s has been disconnected!", c.ID())
-		})
-
+		ctx.View("client.html", clientPage{"Client Page", "localhost:8080"})
 	})
 
+	// Target some browser windows/tabs to http://localhost:8080 and send some messages,
+	// see the static/js/chat.js,
+	// note that the client is using only the browser's native WebSocket API instead of the neffos one.
 	app.Run(iris.Addr(":8080"))
-
 }

_examples/websocket/native-messages/static/js/chat.js

@@ -1,38 +1,35 @@
-var messageTxt;
-var messages;
+var messageTxt = document.getElementById("messageTxt");
+var messages = document.getElementById("messages");
+var sendBtn = document.getElementById("sendBtn")
 
-$(function () {
+w = new WebSocket("ws://" + HOST + "/my_endpoint");
+w.onopen = function () {
+	console.log("Websocket connection enstablished");
+};
 
-	messageTxt = $("#messageTxt");
-	messages = $("#messages");
+w.onclose = function () {
+	appendMessage("<div><center><h3>Disconnected</h3></center></div>");
+};
+w.onmessage = function (message) {
+	appendMessage("<div>" + message.data + "</div>");
+};
 
+sendBtn.onclick = function () {
+	myText = messageTxt.value;
+	messageTxt.value = "";
 
-	w = new WebSocket("ws://" + HOST + "/my_endpoint");
-	w.onopen = function () {
-		console.log("Websocket connection enstablished");
-	};
+	appendMessage("<div style='color: red'> me: " + myText + "</div>");
+	w.send(myText);
+};
 
-	w.onclose = function () {
-		appendMessage($("<div><center><h3>Disconnected</h3></center></div>"));
-	};
-	w.onmessage = function(message){
-		appendMessage($("<div>" + message.data + "</div>"));
-	};
+messageTxt.addEventListener("keyup", function (e) {
+	if (e.keyCode === 13) {
+		e.preventDefault();
 
+		sendBtn.click();
+	}
+});
 
-	$("#sendBtn").click(function () {
-		w.send(messageTxt.val().toString());
-		messageTxt.val("");
-	});
-
-})
-
-
-function appendMessage(messageDiv) {
-    var theDiv = messages[0];
-    var doScroll = theDiv.scrollTop == theDiv.scrollHeight - theDiv.clientHeight;
-    messageDiv.appendTo(messages);
-    if (doScroll) {
-        theDiv.scrollTop = theDiv.scrollHeight - theDiv.clientHeight;
-    }
+function appendMessage(messageDivHTML) {
+	messages.insertAdjacentHTML('afterbegin', messageDivHTML);
 }

_examples/websocket/native-messages/templates/client.html

@@ -1,21 +1,19 @@
 <html>
 
 <head>
-<title>{{ .Title}}</title>
+	<title>{{ .Title}}</title>
 </head>
 
-<body>
-	<div id="messages"
-		style="border-width: 1px; border-style: solid; height: 400px; width: 375px;">
-
-	</div>
+<body style="padding:10px;">
 	<input type="text" id="messageTxt" />
 	<button type="button" id="sendBtn">Send</button>
+	<div id="messages" style="width: 375px;margin:10 0 0 0px;border-top: 1px solid black;">
+	</div>
+
 	<script type="text/javascript">
-		var HOST = {{.Host}}
+		var HOST = {{.Host }}
 	</script>
-	<script src="js/vendor/jquery-2.2.3.min.js" type="text/javascript"></script>
 	<script src="js/chat.js" type="text/javascript"></script>
 </body>
 
-</html>
+</html>