原文地址:

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. [How to] UILocalNotification 的使用

    1.简介 IOS共分为本地和远程通知两种通知,本问介绍本地通知UILocalNotification的基本使用方法. 2.本地通知的实现: 步骤一:新建工程 在Xcode中新建一个single vie ...

  2. tornado 模版继承 函数和类的调用

    模版继承.函数和类的调用 目录结构 lesson5.py # -*- coding:utf-8 -*- import tornado.web import tornado.httpserver imp ...

  3. hibernate连接Oracle rac

    连接方式与普通的数据库不一样.connection.url 中使用了LOAD-BALANCE = yes 要不然会报错 <hibernate-configuration> <sess ...

  4. 算法入门系列1：k-means

    k-means是一种无监督学习算法,用于聚类. 下图(来自http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006910.html)展示了k-m ...

  5. False Positives和False Negative等含义

    True Positive (真正, TP)被模型预测为正的正样本: True Negative(真负 , TN)被模型预测为负的负样本 : False Positive (假正, FP)被模型预测为 ...

  6. python import模块的搜索路径

    当在py代码中import所依赖的模块时, python是从哪里找到这些模块呢,即模块的搜索路径是啥? 默认情况下,Python解释器会搜索当前目录.所有已安装的内置模块和第三方模块,搜索路径存放在s ...

  7. Centos7Yum安装Mysql8

    1.去官网下载rpm文件,该文件专门用于yum安装方式: https://dev.mysql.com/downloads/repo/yum/ 然后拉到最下面,我下载的是第一个:Red Hat Ente ...

  8. Ubuntu Nginx

    如果是阿云的ECS服务器,默认是已经安装了Apache服务器的,但一般都用不到,可以选择将它卸载 sudo service apache2 stop update-rc.d -f apache2 re ...

  9. 京东前端：PhantomJS 和NodeJS在网站前端监控平台的最佳实践

    1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系 ...

  10. 转：Filter的执行顺序与实例

    转:http://www.cnblogs.com/Fskjb/archive/2010/03/27/1698448.html Filter的执行顺序与实例 Filter介绍 Filter可认为是Ser ...