原文地址:

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. Redis -- 过期时间 和 缓存 例子

    1.设置 key的生存时间,过期自动删除 exprire key  seconds    设置过期时间 秒数 ttl key   查询剩余时间 如果 设置了过期时间.对key进行 set 操作,会清除 ...

  2. Centos7 环境准备

    Centos7 环境准备 #关闭防火墙 systemctl stop firewalld systemctl disable firewalld #关闭selinux sed -i 's/SELINU ...

  3. BlockingQueue drainTo()

    BlockingQueue BlockingQueue的核心方法:放入数据: offer(anObject):表示如果可能的话,将anObject加到BlockingQueue里,即如果Blockin ...

  4. vConsole ~ 移动开发调试工具

    在开发移动端项目时,有时候在PC端好好的,但是到了手机上出bug,很难调试,这时候可以用vConsole调试工具 使用方式 1.直接引入 <script src="vconsole.m ...

  5. AC日记——Sagheer and Crossroads codeforces 812a

    812A - Sagheer and Crossroads 思路: 模拟: 代码: #include <cstdio> #include <cstring> #include ...

  6. 使用CMake，且在GCC编译时指定相对源代码路径选项BUG的问题

    CMake的build.make,每次都是cd xxx目录,然后再编译 而编译时,GCC会取当前路径保存进调试信息的DT_AT_comp_dir,GCC的编译器选项-fdebug-prefix-map ...

  7. HDU 1829 A Bug's Life 【带权并查集/补集法/向量法】

    Background Professor Hopper is researching the sexual behavior of a rare species of bugs. He assumes ...

  8. Codeforces 补题记录

    首先总结一下前段时间遇到过的一些有意思的题. Round #474 (Div. 1 + Div. 2, combined)   Problem G 其实关键就是n这个数在排列中的位置. 这样对于一个排 ...

  9. js前端分享功能

    直接添加网页分享代码就可以了.实现方法如下:1.打开百度分享:http://share.baidu.com.2.点击“代码获取”.3.进行个性化设置.

  10. ReentrantLock和ReentrantReadWriteLock对比

    本文系作者原创,转载请注明:https://www.cnblogs.com/yanfei1819/p/10314533.html ReentrantLock 一.简介 ReentrantLock重入锁 ...