原文地址:

http://www.niu12.com/article/3

websocket+golang聊天室

main.go和index.html放在同一目录下

main.go

package main

import (
   "encoding/json"
   "fmt"
   "golang.org/x/net/websocket"
   "net/http"
   "time"
)

type Message struct {
   Username string
   Message  string
}

type User struct {
   Username string
}

type Datas struct {
   Messages []Message
   Users    []User
}

// 全局信息
var datas Datas
var users map[*websocket.Conn]string

func main() {
   fmt.Println("启动时间: ", time.Now())

   // 初始化数据
   datas = Datas{}
   users = make(map[*websocket.Conn]string)

   // 渲染页面
   http.HandleFunc("/", index)

   // 监听socket方法
   http.Handle("/webSocket", websocket.Handler(webSocket))

   // 监听8080端口
   http.ListenAndServe(":8889", nil)
}

func index(w http.ResponseWriter, r *http.Request)  {
   http.ServeFile(w, r, "index.html")
}

func webSocket(ws *websocket.Conn)  {
   var message Message
   var data string
   for {
      // 接收数据
      err := websocket.Message.Receive(ws, &data)
      if err != nil {
         // 移除出错的连接
         delete(users, ws)
         fmt.Println("连接异常")
         break
      }
      // 解析信息
      err = json.Unmarshal([]byte(data), &message)
      if err != nil {
         fmt.Println("解析数据异常")
      }

      // 添加新用户到map中,已经存在的用户不必添加
      if _, ok := users[ws]; !ok {
         users[ws] = message.Username
         // 添加用户到全局信息
         datas.Users = append(datas.Users, User{Username:message.Username})
      }
      // 添加聊天记录到全局信息
      datas.Messages = append(datas.Messages, message)

      // 通过webSocket将当前信息分发
      for key := range users{
         err := websocket.Message.Send(key, data)
         if err != nil{
            // 移除出错的连接
            delete(users, key)
            fmt.Println("发送出错: " + err.Error())
            break
         }
      }
   }
}
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="./favicon.ico" type="image/x-icon" />
    <title>H5聊天室</title>
    <style type="text/css">
        .talk_con {
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 100%;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 100%;
        }

        .talk_word {
            width: 90%;
            height: 26px;
            float: left;
            text-indent: 10px;
            margin: 2% 5%;
        }

        .talk_sub {
            width: 100%;
            height: 30px;
            float: left;
        }

        .atalk {
            margin: 10px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk {
            margin: 10px;
            text-align: right;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
    </style>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 询问框获取用户昵称
            let username = localStorage.getItem("username") ? 
                localStorage.getItem("username") : disp_prompt();
            let words = $("#words");
            let talkWords = $("#talkwords");
            let talkSubmit = $("#talksub");
            // webSocket
            let wsURL = "ws://chat.niu12.com/webSocket";
            ws = new WebSocket(wsURL);
            try {
                // 监听连接服务器
                ws.onopen = function () {
                    console.log("已连接服务器")
                };

                // 监听关闭服务器
                ws.onclose = function () {
                    if (ws) {
                        ws.close();
                        ws = null
                    }
                    console.log("关闭服务器连接")
                };

                // 监听信息
                ws.onmessage = function (result) {
                    let data = JSON.parse(result.data);
                    let className = "atalk";
                    let user = data.username
                    // 如果是本人,放在右边 不是本人 放在左边
                    if (data.username === username){
                        className = "btalk";
                        user = "";
                    }
                    str = words.html() + 
                        '<div class=" + className + ">'+user+'<span>' 
                        + data.message + '</span></div>';
                    words.html(str);
                    var scrollHeight = words.prop("scrollHeight");
                    words.scrollTop(scrollHeight);
                };

                // 监听错误
                ws.onerror = function () {
                    if (ws) {
                        ws.close();
                        ws = null;
                    }
                    console.log("服务器连接失败")
                }
            } catch (e) {
                console.log(e.message)
            }

            document.onkeydown = function (event) {
                let e = event || window.event;
                if (e && e.keyCode === 13) { //回车键的键值为13
                    talkSubmit.click()
                }
            };

            talkSubmit.click(function () {
                // 获取输入框内容
                let content = talkWords.val();
                if (content === "") {
                    // 消息为空时弹窗
                    alert("消息不能为空");
                    return;
                }

                // 发送数据
                if (ws == null){
                    alert("连接服务器失败,请刷新页面");
                    window.location.reload();
                    return
                }
                let request = {"username":username, "message":content};
                ws.send(JSON.stringify(request));
                // 清空输入框
                talkWords.val("")
            })
        });

        function disp_prompt() {
            let username = prompt("请输入昵称");
            if (username == null || username === "") {
                disp_prompt()
            }else {
                localStorage.setItem("username", username);
                return username;
            }
        }
    </script>
</head>
<body>
    <h1>简易聊天室</h1>
    <div class="talk_con">
        <div class="talk_show" id="words">

        </div>
        <div class="talk_input">
            <input type="text" class="talk_word" id="talkwords" placeholder="输入聊天内容">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

websocket+golang聊天室的更多相关文章

  1. 基于WebSocket实现聊天室(Node)

    基于WebSocket实现聊天室(Node) WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力 ...

  2. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  3. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  4. 关于websocket制作聊天室的的一些总结

    websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式.参考地址:https://www.jianshu.com/p/00e... 关于自己的看法:websocke ...

  5. python tornado websocket 多聊天室（返回消息给部分连接者）

    python tornado 构建多个聊天室, 多个聊天室之间相互独立, 实现服务器端将消息返回给相应的部分客户端! chatHome.py // 服务器端, 渲染主页 --> 聊天室建立web ...

  6. nodejs+websocket制作聊天室视频教程

    本套教程主要讲解了node平台的安装,node初级知识.node 服务器端程序响应http请求,通过npm安装第三方包,websocket即时通讯.聊天页面界面制作.拖动原理.拖动效果.遮罩效果.定位 ...

  7. 基于nodejs+webSocket的聊天室（实现：加入聊天室、退出聊天室、在线人数、在线列表、发送信息、接收信息）

    1  安装 socket.io模块 npm install "socket.io": "latest" 2 app.js相关 ws = require('soc ...

  8. 第一节：.Net版基于WebSocket的聊天室样例

    一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...

  9. 基于webSocket的聊天室

    前言 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的.在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费 ...

随机推荐

  1. php中mvc新建页面

    PHP配置: <?phpclass appointmentController extends Controller{public function __construct(){parent:: ...

  2. POJ-2594

    Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 7035   Accepted: 2 ...

  3. 《java并发编程实战》读书笔记12--原子变量，非阻塞算法，CAS

    第15章 原子变量与非阻塞同步机制 近年来,在并发算法领域的大多数研究都侧重于非阻塞算法,这种算法用底层的原子机器指令(例如比较并交换指令)代替锁老确保数据在并发访问中的一致性. 15.1 锁的劣势 ...

  4. OpenCL学习笔记（一）：摩尔定律，异构计算与OpenCL初印象

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld.  技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 关于摩尔定律: 摩尔定律19 ...

  5. android studio 入门比较好的书籍

    http://blog.csdn.NET/aqi00/article/details/50012511 http://blog.csdn.net/aqi00/article/details/73065 ...

  6. AC日记——旅游 bzoj 2157

    2157 思路: LCT: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 400005 #define IN ...

  7. 六十六 aiohttp

    asyncio可以实现单线程并发IO操作.如果仅用在客户端,发挥的威力不大.如果把asyncio用在服务器端,例如Web服务器,由于HTTP连接就是IO操作,因此可以用单线程+coroutine实现多 ...

  8. 战火魔兽CJQ圣印问题

    本来一直是玩的T的. 一次偶然机会打了次团本,用CJQ(毒蛇),在副本中问CJQ用什么圣印 有人说命令,有人说腐蚀... 对此做先研究 无BUFF木桩测试:5分钟(开sp翅膀,不踩奉献,技能什么好了按 ...

  9. 初始pip

    关于pip包括下面的东西还不是很懂,慢慢的了解,我的pip是从https://bootstrap.pypa.io/get-pip.py 粘贴并命名为 get-pip.py 后,执行 python ge ...

  10. 【leetcode】371. Sum of Two Integers

    题目描述: Calculate the sum of two integers a and b, but you are not allowed to use the operator + and - ...