fix: 尝试修复消息结构体并发写入问题 #9

Author: hezhizheng

readme.md

@@ -6,12 +6,12 @@
 
 > [github地址](https://github.com/hezhizheng/go-gin-chat)
 
-## feature
+## Feature
 - 登录/注册(防止重复登录)
 - 群聊(多房间、支持文字、emoji、文件(图片)上传，使用 [freeimage.host](https://freeimage.host/) 做图床 )
 - 私聊(消息提醒)
 - 历史消息查看(点击加载更多)
-- 心跳检测，来自 https://github.com/zimv/websocket-heartbeat-js
+- 心跳检测及自动重连机制，来自 https://github.com/zimv/websocket-heartbeat-js
 - go mod 包管理
 - 使用 Golang 1.16 embed 内嵌静态资源(html、js、css等)，运行只依赖编译好的可执行文件与mysql
 - 支持 http/ws 、 https/wss
@@ -244,7 +244,7 @@ gox -osarch="linux/amd64" -ldflags "-s -w" -gcflags="all=-trimpath=${PWD}" -asmf
 ```
 
 
-## todo
+## TODO
 - [x] 心跳机制
 - [x] 多频道聊天
 - [x] 私聊

static/javascripts/Public.js

@@ -44,8 +44,14 @@ function WebSocketConnect(userInfo,toUserInfo = null) {
 		})
 
 		ws.onopen = function () {
+			// layer.msg("websocket 连接已建立");
+			chat_info.html(chat_info.html() +
+				'<li class="systeminfo" > <span>' +
+				"✅ websocket 连接已建立 " +
+				'</span></li>');
 			ws.send(send_data);
 			//console.log("send_data 发送数据", send_data)
+			toLow();
 		};
 
 		// if ( toUserInfo )
@@ -68,6 +74,7 @@ function WebSocketConnect(userInfo,toUserInfo = null) {
 
 
 		let chat_info = $('.main .chat_info')
+		let isServeClose = 0;
 
 		ws.onmessage = function (evt) {
 			var received_msg = JSON.parse(evt.data);
@@ -115,6 +122,7 @@ function WebSocketConnect(userInfo,toUserInfo = null) {
 					break;
 				case -1:
 					ws.close() // 主动close掉
+					isServeClose = 1
 					console.log("client 连接已关闭...");
 					break;
 				case 4:
@@ -157,23 +165,39 @@ function WebSocketConnect(userInfo,toUserInfo = null) {
 				default:
 			}
 			//console.log("数据已接收...", received_msg);
+
+			// 滚动条滚到最下面
+			toLow();
+
 		};
 
-		ws.onclose = function () {
+		ws.onclose = function (evt) {
 			// 关闭 websocket
-			chat_info.html(chat_info.html() +
-				'<li class="systeminfo"> <span>' +
-				"与服务器连接断开，请刷新页面重试" +
-				'</span></li>');
+			if ( isServeClose === 1 ){
+				chat_info.html(chat_info.html() +
+					'<li class="systeminfo"> <span>' +
+					"❌ 与服务器连接断开，请检查是否在浏览器中打开了多个聊天界面" +
+					'</span></li>');
+			}else{
+				chat_info.html(chat_info.html() +
+					'<li class="systeminfo"> <span>' +
+					"❌ 与服务器连接断开，正在尝试重新连接，请稍后..." +
+					'</span></li>');
+			}
 			// let c = ws.close() // 主动close掉
-			console.log("serve 连接已关闭... " + _time());
+			console.log("serve 连接已关闭... " + _time(),evt);
 			// console.log(c);
+			toLow();
 		};
 
 		ws.onerror = function (evt) {
-			ws.close()
+			// ws.close()
 			console.log("触发 onerror",evt)
 		}
+
+		ws.onreconnect = (e) => {
+			console.log('reconnecting...');
+		}
 
 	} else {
 		// 浏览器不支持 WebSocket
@@ -184,6 +208,11 @@ function WebSocketConnect(userInfo,toUserInfo = null) {
 $(document).ready(function(){
 // ------------------------选择聊天室页面-----------------------------------------------
 
+	// 在页面即将卸载之前关闭WebSocket连接
+	window.addEventListener("beforeunload", function() {
+		console.log("beforeunload close");
+		ws.close();
+	});
 	// 用户信息提交
 
 	$('#userinfo_sub').click(function(event) {
@@ -304,9 +333,7 @@ $(document).ready(function(){
 
 
 			// 滚动条滚到最下面
-			$('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
-				scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
-			}, 500);
+			toLow();
 
 			// 解决input上传文件选择同一文件change事件不生效
 			event.target.value=''
@@ -357,9 +384,7 @@ $(document).ready(function(){
 			ws.send(send_data);
 
 			// 滚动条滚到最下面
-			$('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
-				scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
-			}, 500);
+			toLow();
 
 		}
 
@@ -489,4 +514,10 @@ function isPrivateChat()
 	return window.location.href.search('private-chat') > 0
 }
 
+function toLow() {
+	$('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
+		scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
+	}, 500);
+}
+
 

views/private_chat.html

@@ -104,9 +104,7 @@
 <script>
     $(document).ready(function () {
         // 滚动到底部
-        $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
-            scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
-        }, 500);
+        toLow();
     });
 </script>
 

views/room.html

@@ -147,9 +147,7 @@ <h3 class="popover-title">在线用户 1 人</h3>
         WebSocketConnect(userInfo)
 
         // 滚动到底部
-        $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
-            scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
-        }, 500);
+        toLow();
     });
 </script>
 

ws/go_ws/serve.go

@@ -77,6 +77,9 @@ var (
 	chNotify = make(chan int, 1)
 
 	pingMap []interface{}
+
+	clientMsgLock = sync.Mutex{}
+	clientMsgData = clientMsg // 临时存储 clientMsg 数据
 )
 
 // 定义消息类型
@@ -199,10 +202,8 @@ func read(c *websocket.Conn, done chan<- struct{}) {
 			return
 		}
 
-		serveMsgStr := message
-
 		// 处理心跳响应 , heartbeat为与客户端约定的值
-		if string(serveMsgStr) == `heartbeat` {
+		if string(message) == `heartbeat` {
 			appendPing(c)
 			chNotify <- 1
 			// log.Println("heartbeat pingMap：", pingMap)
@@ -211,7 +212,12 @@ func read(c *websocket.Conn, done chan<- struct{}) {
 			continue
 		}
 
-		json.Unmarshal(message, &clientMsg)
+		json.Unmarshal(message, &clientMsgData)
+
+		clientMsgLock.Lock()
+		clientMsg = clientMsgData
+		clientMsgLock.Unlock()
+
 		//fmt.Println("来自客户端的消息", clientMsg, c.RemoteAddr())
 		if clientMsg.Data.Uid != "" {
 			if clientMsg.Status == msgTypeOnline { // 进入房间，建立连接