IRIS MVC websocket

目录结构

主目录websocket

  1. —— main.go
  2. —— views
  3. —— index.html

代码示例

main.go

  1. package main
  2. import (
  3. "sync/atomic"
  4. "github.com/kataras/iris"
  5. "github.com/kataras/iris/mvc"
  6. "github.com/kataras/iris/websocket"
  7. )
  8. func main() {
  9. app := iris.New()
  10. //加载模板
  11. app.RegisterView(iris.HTML("./views", ".html"))
  12. // 渲染模板 ./views/index.html.
  13. app.Get("/", func(ctx iris.Context) {
  14. ctx.View("index.html")
  15. })
  16. mvc.Configure(app.Party("/websocket"), configureMVC)
  17. // 或者 mvc.New(app.Party(...)).Configure(configureMVC)
  18. // http://localhost:8080
  19. app.Run(iris.Addr(":8080"))
  20. }
  21. func configureMVC(m *mvc.Application) {
  22. ws := websocket.New(websocket.Config{})
  23. // http://localhost:8080/websocket/iris-ws.js
  24. m.Router.Any("/iris-ws.js", websocket.ClientHandler())
  25. //这将由`m.Handle`服务的控制器,
  26. //绑定ws.Upgrade的结果,这是一个websocket.Connection
  27. m.Register(ws.Upgrade)
  28. m.Handle(new(websocketController))
  29. }
  30. var visits uint64
  31. func increment() uint64 {
  32. return atomic.AddUint64(&visits, 1)
  33. }
  34. func decrement() uint64 {
  35. return atomic.AddUint64(&visits, ^uint64(0))
  36. }
  37. type websocketController struct {
  38. //注意你也可以使用匿名字段,无所谓,binder会找到它。
  39. //这是当前的websocket连接,每个客户端都有自己的*websocketController实例。
  40. Conn websocket.Connection
  41. }
  42. func (c *websocketController) onLeave(roomName string) {
  43. //访问 -
  44. newCount := decrement()
  45. //这将在所有客户端上调用“visit”事件,当前客户端除外
  46. //(它不能因为它已经离开但是对于任何情况都使用这种类型的设计)
  47. c.Conn.To(websocket.Broadcast).Emit("visit", newCount)
  48. }
  49. func (c *websocketController) update() {
  50. //访问++
  51. newCount := increment()
  52. //这将在所有客户端上调用“visit”事件,包括当前事件
  53. //使用'newCount'变量。
  54. //你有很多方法可以做到更快,例如你可以发送一个新的visitor
  55. //并且客户端可以自行增加,但这里我们只是“展示”websocket控制器。
  56. c.Conn.To(websocket.All).Emit("visit", newCount)
  57. }
  58. func (c *websocketController) Get( /* websocket.Connection也可以通过这里传值,没关系 */) {
  59. c.Conn.OnLeave(c.onLeave)
  60. c.Conn.On("visit", c.update)
  61. //在所有事件回调注册后调用它
  62. c.Conn.Wait()
  63. }

/views/index.html

  1. <html>
  2. <head>
  3. <title>在线访问者MVC的例子</title>
  4. <style>
  5. body {
  6. margin: 0;
  7. font-family: -apple-system, "San Francisco", "Helvetica Neue", "Noto", "Roboto", "Calibri Light", sans-serif;
  8. color: #212121;
  9. font-size: 1.0em;
  10. line-height: 1.6;
  11. }
  12. .container {
  13. max-width: 750px;
  14. margin: auto;
  15. padding: 15px;
  16. }
  17. #online_visitors {
  18. font-weight: bold;
  19. font-size: 18px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="container">
  25. <span id="online_visitors">1位在线访客</span>
  26. </div>
  27. <script src="/websocket/iris-ws.js"></script>
  28. <script type="text/javascript">
  29. (function () {
  30. var socket = new Ws("ws://localhost:8080/websocket");
  31. socket.OnConnect(function(){
  32. //更新其余连接的客户端,包括"我的"连接100%就绪的"我自"
  33. socket.Emit("visit");
  34. });
  35. socket.On("visit", function (newCount) {
  36. console.log("visit websocket event with newCount of: ", newCount);
  37. var text = "1 online visitor";
  38. if (newCount > 1) {
  39. text = newCount + " online visitors";
  40. }
  41. document.getElementById("online_visitors").innerHTML = text;
  42. });
  43. socket.OnDisconnect(function () {
  44. document.getElementById("online_visitors").innerHTML = "you've been disconnected";
  45. });
  46. })();
  47. </script>
  48. </body>
  49. </html>