Golang实现基于Websocket协议的H5聊天室

http://www.cnblogs.com/wangrudong003/p/5535689.html

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！

// WebChat project main.go
package mainimport ("fmt""net/http""time""encoding/json""strings""golang.org/x/net/websocket"
)//全局信息
var datas Datas
var users map[*websocket.Conn]stringfunc main() {fmt.Println("启动时间")fmt.Println(time.Now())//初始化datas = Datas{}users = make(map[*websocket.Conn]string)//绑定效果页面http.HandleFunc("/", h_index)//绑定socket方法http.Handle("/webSocket", websocket.Handler(h_webSocket))//开始监听http.ListenAndServe(":8080", nil)
}func h_index(w http.ResponseWriter, r *http.Request) {http.ServeFile(w, r, "index.html")
}func h_webSocket(ws *websocket.Conn) {var userMsg UserMsgvar data stringfor {//判断是否重复连接if _, ok := users[ws]; !ok {users[ws] = "匿名"}userMsgsLen := len(datas.UserMsgs)fmt.Println("UserMsgs", userMsgsLen, "users长度：", len(users))//有消息时，全部分发送数据if userMsgsLen > 0 {b, errMarshl := json.Marshal(datas)if errMarshl != nil {fmt.Println("全局消息内容异常...")break}for key, _ := range users {errMarshl = websocket.Message.Send(key, string(b))if errMarshl != nil {//移除出错的链接delete(users, key)fmt.Println("发送出错...")break}}datas.UserMsgs = make([]UserMsg, 0)}fmt.Println("开始解析数据...")err := websocket.Message.Receive(ws, &data)fmt.Println("data：", data)if err != nil {//移除出错的链接delete(users, ws)fmt.Println("接收出错...")break}data = strings.Replace(data, "\n", "", 0)err = json.Unmarshal([]byte(data), &userMsg)if err != nil {fmt.Println("解析数据异常...")break}fmt.Println("请求数据类型：", userMsg.DataType)switch userMsg.DataType {case "send"://赋值对应的昵称到wsif _, ok := users[ws]; ok {users[ws] = userMsg.UserName//清除连接人昵称信息datas.UserDatas = make([]UserData, 0)//重新加载当前在线连接人for _, item := range users {userData := UserData{UserName: item}datas.UserDatas = append(datas.UserDatas, userData)}}datas.UserMsgs = append(datas.UserMsgs, userMsg)}}}type UserMsg struct {UserName stringMsg      stringDataType string
}type UserData struct {UserName string
}type Datas struct {UserMsgs  []UserMsgUserDatas []UserData
}

html5代码部分：（index.html 和main.go放置到同一目录）

<!DOCTYPE html>
<html lang="zh-CN">
<head><title></title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!--        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
</head>
<body><div class="container"><div>内容：</div><div class="list-group" id="divShow"><!--<div class="list-group-item list-group-item-success">1111</div><div class="list-group-item list-group-item-info">1111</div><div class="list-group-item list-group-item-warning">1111</div><div class="list-group-item list-group-item-danger">1111</div>--></div><div class="list-group" id="divUsers">在线：<br /><!--<div class="btn btn-default">111</div>--></div><div>昵称：<input class="form-control" id="txtUserName" value="红领巾" type="text" maxlength="20" style="width: 30%; margin-bottom: 15px" />聊聊：<textarea class="form-control" id="txtContent" autofocus rows="6" placeholder="想聊的内容" maxlength="200" required style="width: 60%; "></textarea><button class="btn btn-default" id="btnSend" style="margin-top:15px">发 送</button></div></div>
</body>
</html><script>var tool = function () {var paperLoopNum = 0;var paperTempleArr = ['<div class="list-group-item list-group-item-success">{0}</div>','<div class="list-group-item list-group-item-info">{0}</div>','<div class="list-group-item list-group-item-warning">{0}</div>','<div class="list-group-item list-group-item-danger">{0}</div>'];return {paperDiv: function (val) {var hl = paperTempleArr[paperLoopNum];paperLoopNum++;if (paperLoopNum >= paperTempleArr.length) { paperLoopNum = 0; }return this.formart(hl, [val])},formart: function (str, arrVal) {for (var i = 0; i < arrVal.length; i++) {str = str.replace("{" + i + "}", arrVal[i]);}return str;}}}function showMsg(id, hl, isAppend) {if (!isAppend) { $("#" + id).html(hl); } else {$("#" + id).append(hl);}}$(function () {//初始化工具方法var tl = new tool();var wsUrl = "ws://127.0.0.1:8080/webSocket";ws = new WebSocket(wsUrl);try {ws.onopen = function () {//showMsg("divShow", tl.paperDiv("连接服务器-成功"));}ws.onclose = function () {if (ws) {ws.close();ws = null;}showMsg("divShow", tl.paperDiv("连接服务器-关闭"), true);}ws.onmessage = function (result) {//console.log(result.data);var data = JSON.parse(result.data);$(data.UserMsgs).each(function (i, item) {showMsg("divShow", tl.paperDiv("【" + item.UserName + "】：" + item.Msg), true);});var userDataShow = [];$(data.UserDatas).each(function (i, item) {userDataShow.push('<div class="btn btn-default">' + item.UserName + '</div>');});showMsg("divUsers", userDataShow.join(''), false);}ws.onerror = function () {if (ws) {ws.close();ws = null;}showMsg("divShow", tl.paperDiv("连接服务器-关闭"), true);}} catch (e) {alert(e.message);}$("#btnSend").on("click", function () {var tContentObj = $("#txtContent");var tContent = $.trim( tContentObj.val()).replace("/[\n]/g", "");var tUserName = $.trim( $("#txtUserName").val()); tUserName = tUserName.length <= 0 ? "匿名" : tUserName;if (tContent.length <= 0 || $.trim(tContent).length <= 0) { alert("请输入发送内容!"); return; }if (ws == null) { alert("连接失败，请F5刷新页面!"); return; }var request = tl.formart('{"UserName": "{0}", "DataType": "{1}", "Msg": "{2}" }',[tUserName, "send", tContent]);ws.send(request);tContentObj.val("");tContentObj.val($.trim(tContentObj.val()).replace("/[\n]/g", ""));});$("#txtContent").on("keydown", function (event) {if (event.keyCode == 13) {$("#btnSend").trigger("click");}});})</script>

效果图：

下载附件

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！

Golang实现基于Websocket协议的H5聊天室相关推荐

基于TCP协议的网络聊天室
创建服务端程序 public class Server {public static void main(String[] args) {new Thread(new ServerTask()).st ...
小成开发日记---利用Qt/C++实现基于Udp协议的网络聊天室（分服务端和客户端的开发【轻聊v1.0.1】)
作者:小成Charles 原创作品转载请标注原创文章地址:https://blog.csdn.net/weixin_42999453/article/details/112363393 一.引言最 ...
websocket多人聊天php,php-notes/基于websocket实现多人聊天室.md at master · dd-code-site/php-notes · GitHub...
WebSocket 连接断开格式:ws://IP或域名:端口发送消息 var websocket; var wsUrl; function connect() { try { wsUrl = ...
workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
php即时聊天的框架_workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
基于阿里云用C/C++做了一个http协议与TCP协议的web聊天室的服务器——《干饭聊天室》
基于阿里云用C/C++做了一个http协议与TCP协议的web聊天室的服务器--<干饭聊天室> 在这里首先感谢前端小伙伴飞鸟前端技术请看一款基于React.C++,使用TCP/HTTP协 ...
基于WebSocket协议实现Broker
写在前面: 前两篇文字<<基于MQTT协议谈谈物联网开发-华佗写代码>>,<<基于MQTT协议实现Broker-华佗写代码>>主要叙述了MQTT协议的编 ...
《 Python程序设计项目案例》— 用Python开发的基于TCP通讯协议的私人聊天室 (期末大作业、结课作业、课程设计、毕业设计)
基于Python与TCP协议的私人聊天室(GUI交互界面,用户注册.用户登录.实时聊天,文件上传与下载) 用Python开发的基于TCP通讯协议的实时聊天通讯和文件共享应用目录基于Python与T ...
Spring Boot实战之基于WebSocket协议构建交互式Web应用
本文阅读时间大约8分钟. 1. WebSocket简介 WebSocekt协议诞生于2008年,在2011年成为国际标准,目前所有的浏览器都已经支持WebSocket协议了.WebSocket协议属于 ...

Golang实现基于Websocket协议的H5聊天室

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！

Golang实现基于Websocket协议的H5聊天室相关推荐

最新文章

热门文章

Golang实现基于Websocket协议的H5聊天室

关注公众号 风色年代（itfantasycc） 300G Golang微服务资料等你拿！

关注公众号 风色年代（itfantasycc） 300G Golang微服务资料等你拿！

Golang实现基于Websocket协议的H5聊天室相关推荐

最新文章

热门文章

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！

关注公众号风色年代（itfantasycc） 300G Golang微服务资料等你拿！