websocket · go学习3部曲：入门，进阶，实战

## server.go ~~~ package main import ( "log" "strings" "github.com/kataras/iris/v12" "github.com/kataras/iris/v12/websocket" ) func main() { 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()) ping := string(msg.Body) pong := strings.Replace(ping,"？", "！", len(ping)) pong = strings.Replace(pong, "么","",len(pong)) mg := websocket.Message{ Body:[]byte(pong), IsNative:true, } nsConn.Conn.Write(mg) 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()) } ws.OnUpgradeError = func(err error) { log.Printf("Upgrade Error: %v", err) } app := iris.New() app.HandleDir("/","./html") app.Get("/msg", websocket.Handler(ws)) app.Get("/ping", func(ctx iris.Context) { ctx.JSON(iris.Map{"message": "pong"}) }) app.Run(iris.Addr(":8080")) } ~~~ ## 前端代码 ~~~ <html> <head> <title>Client Page</title> </head> <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 = "localhost:8080" var messageTxt = document.getElementById("messageTxt"); var messages = document.getElementById("messages"); var sendBtn = document.getElementById("sendBtn") w = new WebSocket("ws://" + HOST + "/msg"); w.onopen = function () { console.log("Websocket connection enstablished"); }; w.onclose = function () { appendMessage("<div><center><h3>Disconnected</h3></center></div>"); }; w.onmessage = function (message) { appendMessage("<div> srv: " + message.data + "</div>"); }; sendBtn.onclick = function () { myText = messageTxt.value; messageTxt.value = ""; appendMessage("<div style='color: red'> me: " + myText + "</div>"); w.send(myText); }; messageTxt.addEventListener("keyup", function (e) { if (e.keyCode === 13) { e.preventDefault(); sendBtn.click(); } }); function appendMessage(messageDivHTML) { messages.insertAdjacentHTML('afterbegin', messageDivHTML); } </script> </body> </html> ~~~ 运行效果： ![](https://img.kancloud.cn/da/f4/daf4ab19c81af03511d98087134e6911_393x214.png)