update the online visitors and vuejs +iris mvc todo app (this gave me some ideas to make the api a bit easier)

Former-commit-id: 8c84486a22505b7137669bde52383d2564a6b382

_examples/tutorial/vuejs-todo-mvc/src/web/controllers/todo_controller.go

@@ -14,6 +14,8 @@ type TodoController struct {
 	Service todo.Service
 
 	Session *sessions.Session
+
+	NS *websocket.NSConn
 }
 
 // BeforeActivation called once before the server ran, and before
@@ -51,15 +53,14 @@ func (c *TodoController) Post(newItems []todo.Item) PostItemResponse {
 	return PostItemResponse{Success: true}
 }
 
-func (c *TodoController) GetSync(conn websocket.Connection) {
-	// join to the session in order to send "saved"
-	// events only to a single user, that means
-	// that if user has opened more than one browser window/tab
-	// of the same session then the changes will be reflected to one another.
-	conn.Join(c.Session.ID())
-	conn.On("save", func() { // "save" event from client.
-		conn.To(c.Session.ID()).Emit("saved", nil) // fire a "saved" event to the rest of the clients w.
+func (c *TodoController) Save(msg websocket.Message) error {
+	id := c.Session.ID()
+	c.NS.Conn.Server().Broadcast(nil, websocket.Message{
+		Namespace: msg.Namespace,
+		Event:     "saved",
+		To:        id,
+		Body:      websocket.Marshal(c.Service.Get(id)),
 	})
 
-	conn.Wait()
+	return nil
 }

_examples/tutorial/vuejs-todo-mvc/src/web/main.go

@@ -1,14 +1,15 @@
 package main
 
 import (
+	"strings"
+
 	"github.com/kataras/iris/_examples/tutorial/vuejs-todo-mvc/src/todo"
 	"github.com/kataras/iris/_examples/tutorial/vuejs-todo-mvc/src/web/controllers"
 
 	"github.com/kataras/iris"
+	"github.com/kataras/iris/mvc"
 	"github.com/kataras/iris/sessions"
 	"github.com/kataras/iris/websocket"
-
-	"github.com/kataras/iris/mvc"
 )
 
 func main() {
@@ -26,16 +27,8 @@ func main() {
 		Cookie: "iris_session",
 	})
 
-	// configure the websocket server.
-	ws := websocket.New(websocket.Config{})
-
-	// create a sub router and register the client-side library for the iris websockets,
-	// you could skip it but iris websockets supports socket.io-like API.
+	// create a sub router and register the http controllers.
 	todosRouter := app.Party("/todos")
-	// http://localhost:8080/todos/iris-ws.js
-	// serve the javascript client library to communicate with
-	// the iris high level websocket event system.
-	todosRouter.Any("/iris-ws.js", websocket.ClientHandler())
 
 	// create our mvc application targeted to /todos relative sub path.
 	todosApp := mvc.New(todosRouter)
@@ -44,11 +37,27 @@ func main() {
 	todosApp.Register(
 		todo.NewMemoryService(),
 		sess.Start,
-		ws.Upgrade,
 	)
 
+	todosController := new(controllers.TodoController)
 	// controllers registration here...
-	todosApp.Handle(new(controllers.TodoController))
+	todosApp.Handle(todosController)
+
+	// Create a sub mvc app for websocket controller.
+	// Inherit the parent's dependencies.
+	todosWebsocketApp := todosApp.Party("/sync")
+	todosWebsocketApp.HandleWebsocket(todosController).
+		SetNamespace("todos").
+		SetEventMatcher(func(methodName string) (string, bool) {
+			return strings.ToLower(methodName), true
+		})
+
+	websocketServer := websocket.New(websocket.DefaultGorillaUpgrader, todosWebsocketApp)
+	idGenerator := func(ctx iris.Context) string {
+		id := sess.Start(ctx).ID()
+		return id
+	}
+	todosWebsocketApp.Router.Get("/", websocket.Handler(websocketServer, idGenerator))
 
 	// start the web server at http://localhost:8080
 	app.Run(iris.Addr(":8080"))

_examples/tutorial/vuejs-todo-mvc/src/web/public/index.html

@@ -11,8 +11,7 @@
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <!-- -->
   <script src="https://unpkg.com/director@1.2.8/build/director.js"></script>
-  <!-- websocket sync between multiple tabs -->
-  <script src="/todos/iris-ws.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos.min.js"></script>
   <!-- -->
   <style>
     [v-cloak] {

_examples/tutorial/vuejs-todo-mvc/src/web/public/js/app.js

@@ -1,15 +1,24 @@
 // Full spec-compliant TodoMVC with Iris
 // and hash-based routing in ~200 effective lines of JavaScript.
 
-var socket = new Ws("ws://localhost:8080/todos/sync");
+var ws;
 
-socket.On("saved", function () {
-  // console.log("receive: on saved");
-  fetchTodos(function (items) {
-    app.todos = items
-  });
-});
+((async () => {
+  const events = {
+    todos: {
+      saved: function (ns, msg) {
+        app.todos = msg.unmarshal()
+        // or make a new http fetch
+        // fetchTodos(function (items) {
+        //   app.todos = msg.unmarshal()
+        // });
+      }
+    }
+  };
 
+  const conn = await neffos.dial("ws://localhost:8080/todos/sync", events);
+  ws = await conn.connect("todos");
+})()).catch(console.error);
 
 function fetchTodos(onComplete) {
   axios.get("/todos").then(response => {
@@ -38,7 +47,7 @@ var todoStorage = {
         return;
       }
       // console.log("send: save");
-      socket.Emit("save")
+      ws.emit("save")
     });
   }
 }
@@ -202,4 +211,4 @@ window.addEventListener('hashchange', onHashChange)
 onHashChange()
 
 // mount
-app.$mount('.todoapp')
+app.$mount('.todoapp');