1. WebSocket编程

    • WebSocket是一种在单个TCP连接上进行全双工通信的协议
    • WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据
    • 在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
    • 需要安装第三方包：
      • cmd中：go get -u -v github.com/gorilla/websocket

    1.1.2. 举个聊天室的小例子

    server.go文件代码

    1. package main
    3. import (
    4.     "fmt"
    5.     "net/http"
    7.     "github.com/gorilla/mux"
    8. )
    10. func main() {
    11.     router := mux.NewRouter()
    12.     go h.run()
    13.     router.HandleFunc("/ws", myws)
    14.     if err := http.ListenAndServe("127.0.0.1:8080", router); err != nil {
    15.         fmt.Println("err:", err)
    16.     }
    17. }

    hub.go文件代码

    data.go文件代码

    1. package main
    3. type Data struct {
    4.     Ip       string   `json:"ip"`
    5.     User     string   `json:"user"`
    6.     From     string   `json:"from"`
    7.     Type     string   `json:"type"`
    8.     Content  string   `json:"content"`
    9.     UserList []string `json:"user_list"`
    10. }

    connection.go文件代码

    local.html文件代码

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title></title>
    5.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
    6.     <style>
    7.         p {
    8.             text-align: left;
    9.             padding-left: 20px;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14. <div style="width: 800px;height: 600px;margin: 30px auto;text-align: center">
    15.     <h1>www.5lmh.comy演示聊天室</h1>
    16.     <div style="width: 800px;border: 1px solid gray;height: 300px;">
    17.         <div style="width: 200px;height: 300px;float: left;text-align: left;">
    18.             <div id="user_list" style="overflow: auto;">
    19.             </div>
    20.         </div>
    21.         <div id="msg_list" style="width: 598px;border:  1px solid gray; height: 300px;overflow: scroll;float: left;">
    22.         </div>
    23.     </div>
    24.     <br>
    26.     <input type="button" value="发送" onclick="send()">
    27. </div>
    28. </body>
    29. </html>
    30. <script type="text/javascript">
    31.     var uname = prompt('请输入用户名', 'user' + uuid(8, 16));
    32.     var ws = new WebSocket("ws://127.0.0.1:8080/ws");
    33.     ws.onopen = function () {
    34.         var data = "系统消息：建立连接成功";
    35.         listMsg(data);
    36.     };
    37.     ws.onmessage = function (e) {
    38.         var msg = JSON.parse(e.data);
    39.         var sender, user_name, name_list, change_type;
    40.         switch (msg.type) {
    41.             case 'system':
    42.                 sender = '系统消息: ';
    43.                 break;
    44.             case 'user':
    45.                 sender = msg.from + ': ';
    46.                 break;
    47.             case 'handshake':
    48.                 var user_info = {'type': 'login', 'content': uname};
    49.                 sendMsg(user_info);
    50.                 return;
    51.             case 'login':
    52.             case 'logout':
    53.                 user_name = msg.content;
    54.                 name_list = msg.user_list;
    55.                 change_type = msg.type;
    56.                 dealUser(user_name, change_type, name_list);
    57.                 return;
    58.         }
    59.         var data = sender + msg.content;
    60.         listMsg(data);
    61.     };
    62.     ws.onerror = function () {
    63.         var data = "系统消息 : 出错了,请退出重试.";
    64.         listMsg(data);
    65.     };
    66.     function confirm(event) {
    67.         var key_num = event.keyCode;
    68.         if (13 == key_num) {
    69.             send();
    70.         } else {
    71.             return false;
    72.         }
    73.     }
    74.         var msg_box = document.getElementById("msg_box");
    75.         var content = msg_box.value;
    76.         var reg = new RegExp("\r\n", "g");
    78.         var msg = {'content': content.trim(), 'type': 'user'};
    79.         sendMsg(msg);
    80.         msg_box.value = '';
    81.     }
    82.     function listMsg(data) {
    83.         var msg_list = document.getElementById("msg_list");
    84.         var msg = document.createElement("p");
    85.         msg.innerHTML = data;
    86.         msg_list.appendChild(msg);
    87.         msg_list.scrollTop = msg_list.scrollHeight;
    88.     }
    89.     function dealUser(user_name, type, name_list) {
    90.         var user_list = document.getElementById("user_list");
    91.         var user_num = document.getElementById("user_num");
    92.         while(user_list.hasChildNodes()) {
    93.             user_list.removeChild(user_list.firstChild);
    94.         }
    95.         for (var index in name_list) {
    96.             var user = document.createElement("p");
    97.             user.innerHTML = name_list[index];
    98.             user_list.appendChild(user);
    99.         }
    100.         user_num.innerHTML = name_list.length;
    101.         user_list.scrollTop = user_list.scrollHeight;
    102.         var change = type == 'login' ? '上线' : '下线';
    103.         var data = '系统消息: ' + user_name + ' 已' + change;
    104.         listMsg(data);
    105.     }
    106.     function sendMsg(msg) {
    107.         var data = JSON.stringify(msg);
    108.         ws.send(data);
    109.     }
    110.     function uuid(len, radix) {
    111.         var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    112.         var uuid = [], i;
    113.         radix = radix || chars.length;
    114.         if (len) {
    115.             for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    116.         } else {
    117.             var r;
    118.             uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    119.             uuid[14] = '4';
    120.             for (i = 0; i < 36; i++) {
    121.                 if (!uuid[i]) {
    122.                     r = 0 | Math.random() * 16;
    123.                     uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
    124.                 }
    125.             }
    126.         }
    127.         return uuid.join('');
    128.     }
    129. </script>