zoukankan      html  css  js  c++  java
  • go语言websocket使用与客户端html5调用

    我们通过使用如下库创建websocket服务

    go get golang.org/x/net/websocket

    websocket服务端的代码如下:

    package main;
    
    import (
    	"golang.org/x/net/websocket"
    	"net/http"
    	"log"
    	"fmt"
    )
    
    //使用golang.org/x/net/websocket
    //如果无法下载,请到下面的地址去下载
    //http://www.golangtc.com/download/package
    //http://gopm.io/
    
    type Msg struct {
    	From string;
    	To string;
    	Data string;
    }
    
    //处理简单的字符串
    func test(conn *websocket.Conn) {
    	var err error;
    	for {
    		data := "";
    		//接收消息
    		err = websocket.Message.Receive(conn, &data);
    		if err != nil {
    			break;
    		}
    		fmt.Println("client send: " + data);
    
    		msg := "hello " + data;
    		//发送消息
    		err = websocket.Message.Send(conn, msg);
    		if err != nil {
    			break;
    		}
    	}
    }
    
    //处理JSON数据
    func test2(conn *websocket.Conn) {
    	var err error;
    	for {
    		var data Msg;
    		//接收消息
    		err = websocket.JSON.Receive(conn, &data);
    		if err != nil {
    			break;
    		}
    		fmt.Println(data.From, data.To, data.Data);
    
    		msg := Msg{
    			From: data.From,
    			To: data.To,
    			Data: "hello " + data.Data,
    		};
    		//发送消息
    		err = websocket.JSON.Send(conn, msg);
    		if err != nil {
    			break;
    		}
    	}
    }
    
    func main() {
    	//http.Handle("/", websocket.Handler(test));
    	http.Handle("/", websocket.Handler(test2));
    	err := http.ListenAndServe(":8080", nil);
    	if err != nil {
    		log.Fatal(err);
    	}
    }
    

    html客户端代码如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>websocket</title>
    </head>
    <body>
        <form>
            <input type="text" id="msg">
            <input type="submit" id="sendBtn" value="发送">
        </form>
        <div id="result"></div>
        <script type="text/javascript">
            var url = "ws://127.0.0.1:8080";
            var ws = new WebSocket(url);
            //ws打开时
            ws.onopen = function() {
                console.log("connect ...");
            };
            //ws连接关闭时
            ws.onclose = function() {
                console.log("close");
            };
            //监听服务器推送数据
            ws.onmessage = function(ev) {
                var result = document.getElementById("result");
                result.innerHTML = result.innerHTML + "<p>" + ev.data + "</p>";
            };
    
            document.getElementById("sendBtn").onclick = function() {
                var msg = document.getElementById("msg").value;
                if(msg.length == 0) {
                    alert("不能为空");
                }
                //发送数据
                ws.send(msg);
                return false;
            };
        </script>
    </body>
    </html>
    

    json格式:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>websocket</title>
    </head>
    <body>
        <form>
            <input type="text" id="msg">
            <input type="submit" id="sendBtn" value="发送">
        </form>
        <div id="result"></div>
        <script type="text/javascript">
            var url = "ws://127.0.0.1:8080";
            var ws = new WebSocket(url);
            //ws打开时
            ws.onopen = function() {
                console.log("connect ...");
            };
            //ws连接关闭时
            ws.onclose = function() {
                console.log("close");
            };
            //监听服务器推送数据
            ws.onmessage = function(ev) {
                var result = document.getElementById("result");
                var data = eval("(" + ev.data + ")");
                result.innerHTML = result.innerHTML + "<p>" + data.From + "发送" + data.To + ":" + data.Data + "</p>";
            };
    
            document.getElementById("sendBtn").onclick = function() {
                var msg = document.getElementById("msg").value;
                if(msg.length == 0) {
                    alert("不能为空");
                }
                //发送数据
                //注意这里JOSN的拼接,key和value要用双引号,否则go无法解析
                ws.send('{"From":"小张","To":"小王","Data":"' + msg + '"}');
                return false;
            };
        </script>
    </body>
    </html>
    

  • 相关阅读:
    leetcode:Power of Two
    求二进制中1的个数
    leetcode:Contains Duplicate和Contains Duplicate II
    leetcode:Summary Ranges
    leetcode Database1(三)
    c++作业:使用函数调用的方法,实现求两个整数中大的数的程序。
    Java制作桌面弹球下载版 使用如鹏游戏引擎制作 包含2个精灵球同时弹动
    Java动画 重力弹球 如鹏游戏引擎 精灵 设计一个小球加速落地又减速弹起并反复直到停止的Java程序
    为什么方差的分母有时是n,有时是n-1 源于总体方差和样本方差的不同
    计算机应用第三次作业:自动开机自动关机 常用DOS命令 关于文件文件夹
  • 原文地址:https://www.cnblogs.com/jkko123/p/7027621.html
Copyright © 2011-2022 走看看