mirror of
https://github.com/kataras/iris.git
synced 2025-12-23 12:57:05 +00:00
update the nantive-messages(only) example to the latest websocket (minimum changes, the idea is the same) and misc
Former-commit-id: 9598319bc13e8a383114c37f4da84f337ab47b22
This commit is contained in:
Gerasimos (Makis) Maropoulos
@@ -10,7 +10,7 @@
|
||||
However, `neffos.(min.)js` is a NPM package too so alternatively,
|
||||
you can use it as dependency on your package.json and all nodejs-npm tooling become available:
|
||||
see the "browserify" example for more-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/neffos.js@0.1.12/dist/neffos.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos.min.js"></script>
|
||||
<script>
|
||||
// `neffos` global variable is available now.
|
||||
var scheme = document.location.protocol == "https:" ? "wss" : "ws";
|
||||
|
||||
@@ -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"))
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user