devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信多人聊天及轮盘小游戏（websocket实现）_微信群聊小游戏 代码

作者：Cpp五条 | 2024-04-23 16:04:48

赞

踩

微信群聊小游戏 代码

主要功能

  • socket建立连接成功提醒及反馈。
  • 房间内有人加入时提醒。
  • 房间内有人离开时提醒。
  • 房间内聊天消息的转发。
  • 房间内转盘游戏的状态同步。

概况：用户可选择 【创建房间】、【加入房间】两个选项，每个房间最多容纳8人同时游戏或聊天。

具体实现思路：客户端发起socket连接时路径会带上参数：gameRoomNum_OpenId_type，解释：（gameRoomNum：房间号；OpenId：用户openId，type：用户类型【0房主用户，1房客用户】），此参数会在后台作为session的唯一标识，后台的每个socket对应的session会放在一个Map中，其key为gameRoomNum_OpenId_type，value为socket的session。客户端与服务端定义好会话的code码，根据code码区分会话的类别。服务端主动给客户端发送消息时，遍历map中所有key，与指定客户端的gameRoomNum_OpenId_type一致时，获取该key对应的value，调用其session对应的sendText方法即可向客户端主动发送消息。

截图

下图简述：轮盘为房间内用户的头像及其名称（图片展示的是默认头像及默认提示字符），聊天框内会提示用户进入（不会提示用户离开。可以实现，但个人觉得不必要。实现了用户离开时轮盘会将该用户的头像与提示字符改为默认头像及默认提示字符）、用户在房间内的聊天信息等

代码

后台核心代码：

  1. @Slf4j
  2. @Component
  3. @ServerEndpoint(value = "/wsdemo/{gameRoomNum_OpenId_type}")
  4. public class MyWebSocket {
  5.  
  6.     private static int onlineCount = 0;
  7.  
  8.     private static Map<String, MyWebSocket> webSocketClientMap = new ConcurrentHashMap<>();
  9.     private Session session;
  10.     private String gameRoomNum_OpenId_type = "";
  11.  
  12.     @OnOpen
  13.     public void onOpen(@PathParam(value = "gameRoomNum_OpenId_type") String param, Session session) {
  14.         System.err.println("参数:" + param);
  15.         gameRoomNum_OpenId_type = param;
  16.         this.session = session;
  17.         webSocketClientMap.put(param, this);
  18.         addOnlineCount();
  19.         System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
  20.         try {
  21.             sendMessage(session, "socket建立成功");
  22.         } catch (Exception e) {
  23.             System.out.println("IO异常");
  24.         }
  25.     }
  26.  
  27.     @OnClose
  28.     public void onClose(Session session) {
  29.         GameRoomService gameRoomService = SpringAware.getContext().getBean(GameRoomService.class);
  30.         GameRoomFlowService gameRoomFlowService = SpringAware.getContext().getBean(GameRoomFlowService.class);
  31.  
  32.         for (String gameRoomNum_OpenId_type : webSocketClientMap.keySet()) {
  33.             if (session.equals(webSocketClientMap.get(gameRoomNum_OpenId_type).getSession())) {
  34.                 System.err.println(gameRoomNum_OpenId_type + "的session移除");
  35.                 webSocketClientMap.remove(gameRoomNum_OpenId_type);
  36.                 subOnlineCount();
  37.                 System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
  38.         }
  39.     }
  40.  
  41.     /**
  42.      * WQ
  43.      * * 转盘游戏相关：
  44.      * * 	10 创建房间 {code:10,joinGameRoomNum:joinGameRoomNum,openId:roomOwnerOpenId,msg:'创建房间'}
  45.      * * 	11 加入房间 {code:11,joinGameRoomNum:joinGameRoomNum,openId:roomGuestOpenId,msg:'加入房间'}
  46.      * * 	12 房主离开房间 {code:12,joinGameRoomNum:joinGameRoomNum,openId:roomOwnerOpenId,msg:'房主离开房间'}
  47.      * * 	13 游客离开房间 {code:12,joinGameRoomNum:joinGameRoomNum,openId:roomGuestOpenId,msg:'游客离开房间'}
  48.      * * 聊天相关：
  49.      * * 	20 向房间的消息框中发送消息 {code:20,joinGameRoomNum:joinGameRoomNum,openId:sendMsgOpenId,content:'消息内容',msg:'用户向房间内的其他用户发送消息'}
  50.      * * 转盘相关：
  51.      * * 	30 用户点击了轮盘开始按钮  {code:30,joinGameRoomNum:joinGameRoomNum,openId:openId,flag:flag,msg:'房间内的玩家点击了转盘开始按钮'}
  52.      */
  53.     @OnMessage
  54.     public void onMessage(String message, Session session) {
  55.         System.out.println("有客户单发送消息：" + message);
  56.  
  57.     }
  58.  
  59.     @OnError
  60.     public void onError(Session session, Throwable error) {
  61.         System.out.println("发生错误");
  62.         error.printStackTrace();
  63.     }
  64.  
  65.     /**
  66.      * WQ
  67.      * 2022-06-19 8:34
  68.      * 消息发送方法。
  69.      * session：给该客户端发送消息
  70.      * message：发送给客户端的消息内容
  71.      */
  72.     public void sendMessage(Session session, String message) {
  73.         try {
  74.             session.getBasicRemote().sendText(message);
  75.         } catch (Exception e) {
  76.             System.err.println("向客户端发送消息出错。" + e.getMessage());
  77.         }
  78.     }
  79.  
  80.     public static synchronized int getOnlineCount() {
  81.         return onlineCount;
  82.     }
  83.  
  84.     public static synchronized void addOnlineCount() {
  85.         MyWebSocket.onlineCount++;
  86.     }
  87.  
  88.     public static synchronized void subOnlineCount() {
  89.         MyWebSocket.onlineCount--;
  90.     }
  91.  
  92.     public Session getSession() {
  93.         return session;
  94.     }
  95.  
  96.     public void setSession(Session session) {
  97.         this.session = session;
  98.     }
  99.  
  100.     public static Map<String, MyWebSocket> getWebSocketClientMap() {
  101.         return webSocketClientMap;
  102.     }
  103.  
  104.     public static void setWebSocketClientMap(Map<String, MyWebSocket> webSocketClientMap) {
  105.         MyWebSocket.webSocketClientMap = webSocketClientMap;
  106.     }
  107. }

小程序端核心代码

  1. <template>
  2. 	<view style="overflow: hidden;">
  3. 		<!-- 房间创建 -->
  4. 		<view class='cu-load load-modal' v-if="loadModalCreateGameRoom">
  5. 			<view class='gray-text'>房间创建中...</view>
  6. 		</view>
  7.  
  8. 		<!-- 房主离开模态框，只允许点击确定，后返回上一界面 -->
  9. 		<view :class="roomOwnerLeaveModal">
  10. 			<view class="cu-dialog">
  11. 				<view class="padding-xl" style="font-size: 32rpx;background-color: #fff;">
  12. 					<text class="text-bold text-black">房主已离开房间~</text>
  13. 				</view>
  14. 				<view class="cu-bar bg-white">
  15. 					<view class="action margin-0 flex-sub text-grey " @click="submitBackLastPage">
  16. 						确定
  17. 					</view>
  18. 				</view>
  19. 			</view>
  20. 		</view>
  21.  
  22. 		<view class="title bg-white text-center text-bold text-lg" style="width: 100%;">房间号: {{joinGameRoomNum}}</view>
  23. 		<!-- ======================================转盘 start============================================ -->
  24. 		<view style="position: relative; overflow: hidden;width: 100%;" class="bg-white">
  25. 			<view class="box bg-gradual-pink" :class="isStart?'start':''" :style="'transform: rotate('+deg+'deg)'">
  26. 				<view class="box_item" v-for="item in data" :key='item.id'>
  27. 					<view class="cu-avatar radius margin-left" :style="'background-image:url('+item.avatarImg+');'">
  28. 						<text style="margin-top: 120rpx;" class="text-sm">{{item.name}}</text>
  29. 					</view>
  30. 				</view>
  31. 			</view>
  32. 			<view class="active bg-gradual-red" @click="active">
  33. 				开始
  34. 			</view>
  35. 		</view>
  36. 		<!-- ======================================转盘 end============================================ -->
  37.  
  38. 		<view>
  39. 			<view class="heng"></view>
  40. 		</view>
  41. 		<!-- ======================================聊天相关 start============================================ -->
  42. 		<scroll-view class=" cu-chat bg-white shadow" scroll-y='true' style="border-radius: 20rpx;height: 400rpx;"
  43. 			:scroll-top="scrollTop">
  44. 			<view id="chat-box" class="cu-chat">
  45. 				<view v-if="contentList.length === 0" style="text-align: center;">
  46. 					<text style="" class="text-grey">-----暂无消息-----</text>
  47. 				</view>
  48. 				<view v-for="(item,index) in contentList" :key='index' v-else>
  49. 					<view class="cu-item" v-if="item.type === 1">
  50. 						<view class="cu-avatar radius" :style="'background-image:url('+item.avatarImg+');'">
  51. 						</view>
  52. 						<view class="main">
  53. 							<view class="content shadow">
  54. 								<text>{{item.content}}</text>
  55. 							</view>
  56. 						</view>
  57. 						<view class="date ">{{item.sendTime}}</view>
  58. 					</view>
  59. 					<view style="text-align: center;" v-if="item.type === 2">
  60. 						<view class="cu-info">
  61. 							<text>{{item.content}}({{item.sendTime}})</text>
  62. 						</view>
  63. 					</view>
  64. 					<view class="cu-item self" v-if="item.type === 0">
  65. 						<view class="main">
  66. 							<view class="content shadow">
  67. 								{{item.content}}
  68. 							</view>
  69. 						</view>
  70. 						<view class="cu-avatar radius" :style="'background-image:url('+item.avatarImg+');'"></view>
  71. 						<view class="date">{{item.sendTime}}</view>
  72. 					</view>
  73. 				</view>
  74. 			</view>
  75. 		</scroll-view>
  76. 		<view class="cu-bar input margin-sm" style="border-radius: 20rpx;">
  77. 			<input class="solid-bottom" maxlength="50" cursor-spacing="10" v-model="content"></input>
  78. 			<button class="cu-btn bg-green shadow" @click="syncRoomContent">发送</button>
  79. 		</view>
  80. 		<!-- ======================================聊天相关 end============================================ -->
  81. 	</view>
  82. </template>
  83.  
  84. <script>
  85. 	import {
  86. 		request,
  87. 		websocketUrl
  88. 	} from "../../util/index";
  89. 	import {
  90. 		getRandomNum_AB,
  91. 		GL
  92. 	} from '../../util/rotaryTable'
  93.  
  94. 	export default {
  95. 		data() {
  96. 			return {
  97. 				//=======================聊天 start============================
  98. 				content: '',
  99. 				contentList: [], //聊天框的内容集合
  100. 				scrollTop: 0, //滚动条距离顶部的距离
  101. 				//=======================聊天 end============================
  102.  
  103. 				roomOwnerLeaveModal: 'cu-modal',
  104. 				loadModalCreateGameRoom: false,
  105. 				//=======================转盘相关 start============================
  106. 				deg: 22.5,
  107. 				isStart: false,
  108. 				flag: 0,
  109. 				roomOwnerUserInfo: {}, //当前房间的房主对象信息
  110. 				roomGuestUserInfoList: [], //当前房间的游客对象集合信息
  111. 				//=======================转盘相关 end============================
  112.  
  113. 				//=======================webSocket相关 start============================
  114. 				userOpenId: uni.getStorageSync('userOpenId'),
  115. 				isOpenSocket: false, //已经打开socket
  116. 				socketTask: null, //socket连接
  117.  
  118. 				type: -1, //类型。创建0 or加入1
  119. 				joinGameRoomNum: '', //房间号
  120. 				roomOwnerOpenId: '', //房主openId
  121. 				roomGuestOpenId: '', //房客们openId
  122. 				//=======================webSocket相关 end============================
  123.  
  124.  
  125. 				/*
  126. 				 * 发送给服务器的消息格式定义：{code:10,joinGameRoomNum:joinGameRoomNum,openId:userOpenId,msg:''}
  127. 				 * 标识：
  128. 				 * 转盘游戏相关：
  129. 				 * 	10 创建房间 {code:10,joinGameRoomNum:joinGameRoomNum,openId:roomOwnerOpenId,msg:'创建房间'}  小程序主动发送给服务器
  130. 				 * 	11 加入房间 {code:11,joinGameRoomNum:joinGameRoomNum,openId:roomGuestOpenId,msg:'加入房间'}  小程序主动发送给服务器
  131. 				 * 	12 房主离开房间 {code:12,joinGameRoomNum:joinGameRoomNum,openId:roomOwnerOpenId,msg:'房主离开房间'}   服务器主动发送给小程序
  132. 				 * 	13 游客离开房间 {code:12,joinGameRoomNum:joinGameRoomNum,openId:roomGuestOpenId,msg:'游客离开房间'}   服务器主动发送给小程序
  133. 				 * 聊天相关：
  134. 				 * 	20 向房间的消息框中发送消息  {code:20,joinGameRoomNum:joinGameRoomNum,openId:sendMsgOpenId,content:'',msg:'用户向房间内的其他用户发送消息'} 小程序主动发送给服务器
  135. 				 * 转盘相关：
  136. 				 * 	30 用户点击了轮盘开始按钮  {code:30,joinGameRoomNum:joinGameRoomNum,openId:openId,flag:flag,msg:'房间内的玩家点击了转盘开始按钮'}   小程序主动发送给服务器
  137. 				 */
  138. 				//建立连接时所带的参数。例：U594EW2V_oQqIy4z11-KEwSftcaz8GImDWFnQ_1：房间号_openId_房主0/游客1
  139. 				pathParam: '',
  140. 				//长连接的请求参数封装
  141. 				websocketReqParam: {
  142. 					code: 0,
  143. 					joinGameRoomNum: '',
  144. 					openId: '',
  145. 					msg: ''
  146. 				},
  147. 				//响应参数封装
  148. 				websocketRespParam: {}
  149. 			}
  150. 		},
  151. 		computed: {
  152. 			data() {
  153. 				//即将返回的结果集
  154. 				var itemList = []
  155. 				if (this.roomOwnerUserInfo.avatarImg !== undefined) {
  156. 					itemList.push({
  157. 						id: 1,
  158. 						name: this.roomOwnerUserInfo.nickName,
  159. 						avatarImg: this.roomOwnerUserInfo.avatarImg
  160. 					})
  161. 				}
  162. 				if (this.roomGuestUserInfoList.length > 0) {
  163. 					var itemListLength = itemList.length
  164. 					for (var i = 0; i < this.roomGuestUserInfoList.length; i++) {
  165. 						itemList.push({
  166. 							id: ++itemListLength,
  167. 							name: this.roomGuestUserInfoList[i].nickName,
  168. 							avatarImg: this.roomGuestUserInfoList[i].avatarImg
  169. 						})
  170. 					}
  171. 				}
  172.  
  173. 				var itemListLength = itemList.length
  174. 				while (itemList.length < 8) {
  175. 					itemList.push({
  176. 						id: ++itemListLength,
  177. 						name: '谢谢惠顾',
  178. 						avatarImg: '../../static/svg/icon-no-guest.svg'
  179. 					})
  180. 				}
  181.  
  182. 				return itemList
  183. 			}
  184. 		},
  185. 		onLoad(options) {
  186. 			var type = options.type
  187. 			if (type == 0) { //创建房间
  188. 				this.loadModalCreateGameRoom = true
  189. 				this.type = 0
  190. 				this.roomOwnerOpenId = uni.getStorageSync('userOpenId')
  191. 				//获取房间号
  192. 				var vm = this
  193. 				//此处用户授权小游戏时会给用户创建一个游戏房间，该用户就为该游戏房间的房主
  194. 				request('/getRoomNumByRoomOwnerOpenId', {
  195. 					roomOwnerOpenId: vm.roomOwnerOpenId
  196. 				}).then((data) => {
  197. 					vm.loadModalCreateGameRoom = false
  198. 					vm.joinGameRoomNum = data.gameRoomEntity.gameRoomNum
  199. 					//请求参数赋值
  200. 					vm.websocketReqParam = {
  201. 						code: 10,
  202. 						joinGameRoomNum: vm.joinGameRoomNum,
  203. 						openId: vm.roomOwnerOpenId,
  204. 						msg: '创建房间'
  205. 					}
  206. 					//建立连接时的路径参数赋值
  207. 					vm.pathParam = vm.joinGameRoomNum + '_' + uni.getStorageSync('userOpenId') + '_0'
  208. 					//建立socket连接
  209. 					vm.connectSocketInit()
  210. 				})
  211. 			} else if (type == 1) { //加入房间
  212. 				var vm = this
  213. 				vm.type = 1
  214. 				vm.joinGameRoomNum = options.joinGameRoomNum
  215. 				vm.roomGuestOpenId = uni.getStorageSync('userOpenId')
  216. 				//请求参数赋值
  217. 				this.websocketReqParam = {
  218. 					code: 11,
  219. 					joinGameRoomNum: vm.joinGameRoomNum,
  220. 					openId: vm.roomGuestOpenId,
  221. 					msg: '加入房间'
  222. 				}
  223. 				//建立连接时的路径参数赋值
  224. 				vm.pathParam = vm.joinGameRoomNum + '_' + uni.getStorageSync('userOpenId') + '_1'
  225. 				//建立socket连接
  226. 				this.connectSocketInit()
  227. 			}
  228. 		},
  229. 		onUnload() {
  230. 			this.closeSocket()
  231. 		},
  232. 		methods: {
  233. 			//房主离开了此房间，点击确定按钮，返回上一界面（相当于点击左上角返回箭头）
  234. 			submitBackLastPage() {
  235. 				uni.navigateBack({});
  236. 			},
  237. 			//===========================webSocket相关 start==================================
  238. 			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
  239. 			connectSocketInit() {
  240. 				var vm = this
  241. 				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
  242. 				this.socketTask = uni.connectSocket({
  243. 					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
  244. 					url: `${websocketUrl}/${vm.pathParam}`,
  245. 					success(data) {
  246. 						console.log("websocket连接成功", data);
  247. 					},
  248. 				});
  249. 				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
  250. 				this.socketTask.onOpen((res) => {
  251. 					console.log("WebSocket连接正常打开中...！");
  252. 					vm.isOpenSocket = true;
  253. 					// 注：只有连接正常打开中 ，才能正常成功发送消息
  254. 					this.socketTask.send({
  255. 						data: JSON.stringify(vm.websocketReqParam),
  256. 						async success() {
  257. 							console.log("消息发送成功", vm.type);
  258. 						},
  259. 					});
  260. 					// 注：只有连接正常打开中 ，才能正常收到消息
  261. 					this.socketTask.onMessage((res) => {
  262. 						console.log("收到服务器内容：", res.data)
  263. 						vm.handleServerMsg(res.data)
  264. 					});
  265. 				})
  266. 				// 这里仅是事件监听【如果socket关闭了会执行】
  267. 				this.socketTask.onClose(() => {
  268. 					console.log("已经被关闭了")
  269. 				})
  270. 			},
  271. 			// 关闭websocket【离开这个页面的时候执行关闭】
  272. 			closeSocket() {
  273. 				var vm = this
  274. 				if (vm.socketTask) {
  275. 					vm.socketTask.close({
  276. 						success(res) {
  277. 							vm.isOpenSocket = false;
  278. 							console.log("关闭成功", res)
  279. 						},
  280. 						fail(err) {
  281. 							console.log("关闭失败", err)
  282. 						}
  283. 					})
  284. 				} else {
  285. 					console.log('vm.socketTask为null，无需关闭');
  286. 				}
  287. 			},
  288. 			//服务器端消息处理
  289. 			handleServerMsg(serverMsg) {
  290. 				//转成json对象
  291. 				var serverMsgJson = JSON.parse(serverMsg)
  292. 				if (serverMsgJson.code === 0) {
  293. 					var dataObj = serverMsgJson.data
  294. 					switch (dataObj.type) {
  295. 						case '010': //房主创建房间的响应
  296. 							// console.log('房主创建房间的响应', dataObj);
  297. 							uni.showToast({
  298. 								title: '创建房间成功',
  299. 							})
  300. 							this.roomOwnerUserInfo = dataObj.roomOwnerUserInfo
  301. 							break;
  302. 						case '011': //游客加入房间的响应  聊天框中给出提示信息
  303. 							this.roomOwnerUserInfo = dataObj.roomOwnerUserInfo
  304. 							this.roomGuestUserInfoList = dataObj.roomGuestUserInfo
  305.  
  306. 							var newGuestNickName = dataObj.newGuestUserInfo.nickName
  307. 							//聊天框中给出有新人加入的提示信息
  308. 							this.contentList.push({
  309. 								type: 2,
  310. 								content: `欢迎 ${newGuestNickName} 加入房间~`,
  311. 								sendTime: this.getHms()
  312. 							})
  313. 							this.autoToBottom()
  314.  
  315. 							break;
  316. 						case '012': //房主离开房间的响应
  317. 							//弹出模态框，只允许点击离开按钮
  318. 							this.roomOwnerLeaveModal = 'cu-modal show'
  319. 							break;
  320. 						case '013': //游客离开房间的响应
  321. 							//将游客集合中的该游客移除
  322. 							for (var i = 0; i < this.roomGuestUserInfoList.length; i++) {
  323. 								if (this.roomGuestUserInfoList[i].openId === dataObj.openId) {
  324. 									this.roomGuestUserInfoList.splice(i, 1);
  325. 								}
  326. 							}
  327. 							break;
  328. 						case '020': //同步聊天内容  "content":"111222测试333","openId":"oQqIy4z11-KEwSftcaz8GImDWFnQ"
  329. 							//同步聊天内容
  330. 							var type = 1 // 用户类型。0 自身发送（在发送按钮触发的方法中涉及），1 他人发送（此处为接收到他人的消息，故都是1）
  331. 							var avatarImg = '' //用户头像
  332. 							for (var i = 0; i < this.roomGuestUserInfoList.length; i++) {
  333. 								if (this.roomGuestUserInfoList[i].openId === dataObj.openId) {
  334. 									avatarImg = this.roomGuestUserInfoList[i].avatarImg
  335. 								}
  336. 							}
  337. 							if (avatarImg === '') {
  338. 								avatarImg = this.roomOwnerUserInfo.avatarImg
  339. 							}
  340.  
  341. 							this.contentList.push({
  342. 								type: type,
  343. 								content: dataObj.content,
  344. 								avatarImg: avatarImg,
  345. 								sendTime: dataObj.sendTime
  346. 							})
  347.  
  348. 							this.autoToBottom()
  349. 							break;
  350. 						case '030': //同步转盘状态
  351. 							//同步玩家转盘状态
  352. 							this.flag = dataObj.flag
  353. 							this.activeAuto(this.flag)
  354. 							var gamingNickName = ''
  355. 							for (var i = 0; i < this.roomGuestUserInfoList.length; i++) {
  356. 								if (this.roomGuestUserInfoList[i].openId === dataObj.openId) {
  357. 									gamingNickName = this.roomGuestUserInfoList[i].nickName
  358. 								}
  359. 							}
  360. 							uni.showToast({
  361. 								title: `玩家 ${gamingNickName} 已启动转盘~`,
  362. 								icon: 'none'
  363. 							})
  364. 							break;
  365. 					}
  366. 				} else {
  367. 					console.log('服务器向客户端发送的消息出错。', serverMsg);
  368. 				}
  369. 			},
  370. 			//告诉房间内的其他玩家，房间内有玩家点击了 开始 按钮
  371. 			tellOtherGuestAndOwnerActive() {
  372. 				var msg = {
  373. 					code: 30,
  374. 					joinGameRoomNum: this.joinGameRoomNum,
  375. 					openId: uni.getStorageSync('userOpenId'),
  376. 					flag: this.flag,
  377. 					msg: '房间内的玩家点击了转盘开始按钮'
  378. 				}
  379. 				if (this.isOpenSocket) {
  380. 					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
  381. 					this.socketTask.send({
  382. 						data: JSON.stringify(msg),
  383. 						async success() {
  384. 							console.log("消息发送成功");
  385. 						},
  386. 					});
  387. 				}
  388. 			},
  389. 			//聊天框消息发送
  390. 			syncRoomContent() {
  391. 				if (this.content === '') {
  392. 					uni.showToast({
  393. 						title: '内容不可为空',
  394. 						icon: 'none'
  395. 					})
  396. 					return
  397. 				}
  398. 				var msg = {
  399. 					code: 20,
  400. 					joinGameRoomNum: this.joinGameRoomNum,
  401. 					openId: uni.getStorageSync('userOpenId'),
  402. 					content: this.content,
  403. 					msg: '房间内的用户发送消息'
  404. 				}
  405. 				var avatarImg = '' //用户头像
  406. 				for (var i = 0; i < this.roomGuestUserInfoList.length; i++) {
  407. 					if (this.roomGuestUserInfoList[i].openId === msg.openId) {
  408. 						avatarImg = this.roomGuestUserInfoList[i].avatarImg
  409. 					}
  410. 				}
  411. 				if (avatarImg === '') {
  412. 					avatarImg = this.roomOwnerUserInfo.avatarImg
  413. 				}
  414.  
  415. 				var vm = this
  416. 				if (this.isOpenSocket) {
  417. 					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
  418. 					this.socketTask.send({
  419. 						data: JSON.stringify(msg),
  420. 						async success() {
  421. 							//写入消息框内
  422. 							vm.contentList.push({
  423. 								type: 0,
  424. 								content: vm.content,
  425. 								avatarImg: avatarImg,
  426. 								sendTime: vm.getHms()
  427. 							})
  428. 						},
  429. 						complete() {
  430. 							console.log('消息发送，complete()');
  431.  
  432. 							//输入框内容重置
  433. 							vm.content = ''
  434. 						}
  435. 					});
  436. 				} else {
  437. 					uni.showToast({
  438. 						title: '与服务器断连',
  439. 						icon: 'none'
  440. 					})
  441. 				}
  442.  
  443. 				this.autoToBottom()
  444.  
  445.  
  446. 			},
  447. 			//自动滚到最底部
  448. 			autoToBottom() {
  449. 				var vm = this
  450. 				//设置滚动条在最底部
  451. 				wx.createSelectorQuery().select('#chat-box').boundingClientRect(function(rect) {
  452. 					//滚动的高度=scroll-view内view的高度
  453. 					vm.scrollTop = rect.height
  454. 				}).exec()
  455. 			},
  456. 			//获取当前的时分秒
  457. 			getHms() {
  458. 				var nowDate = new Date();
  459. 				var hours = nowDate.getHours(); //获取小时
  460. 				var minutes = nowDate.getMinutes(); //获取分
  461. 				return hours + ":" + minutes
  462. 			},
  463.  
  464. 			//===========================webSocket相关 end==================================
  465.  
  466. 			//===========================轮盘相关 start==================================
  467. 			//点击开始按钮触发的方法
  468. 			active() {
  469. 				//获取概率  （每个人概率相同）
  470. 				const map = new Map()
  471. 				var probability = 1 / (this.roomGuestUserInfoList.length + 1)
  472. 				map.set(1, probability)
  473. 				for (var i = 1; i <= this.roomGuestUserInfoList.length; i++) {
  474. 					map.set(i + 1, probability)
  475. 				}
  476. 				//若轮盘正在转，则不可点击，直接返回
  477. 				if (this.isStart) {
  478. 					return
  479. 				}
  480. 				this.isStart = true
  481. 				// this.flag=getRandomNum_AB(1,8)
  482. 				// 随机生成 1 ~ 9 之间的数(不包含9) 
  483. 				let gl = new GL({
  484. 					min: 1,
  485. 					max: 9,
  486. 					fenpei: map
  487. 				});
  488. 				this.flag = gl.random()
  489. 				// 指定奖项
  490. 				this.start(this.flag)
  491. 				//通知其他玩家
  492. 				this.tellOtherGuestAndOwnerActive()
  493. 			},
  494. 			//其他玩家点击了，这边需要同步的方法
  495. 			activeAuto() {
  496. 				this.isStart = true
  497. 				// 指定奖项
  498. 				this.start(this.flag)
  499. 			},
  500. 			start(n) {
  501. 				// 获取旋转角度
  502. 				let deg = 1080 - (45 * n) + 22.5
  503. 				this.deg += deg
  504. 				setTimeout(() => {
  505. 					this.isStart = false
  506. 					let title = this.data[this.flag - 1].name
  507. 					uni.showModal({
  508. 						title: '提示',
  509. 						content: title,
  510. 						success: (res) => {
  511. 							this.deg = 22.5
  512. 							//   if (res.confirm) {
  513. 							//       console.log('用户点击确定');
  514. 							// this.deg= 21
  515. 							//   } else if (res.cancel) {
  516. 							//       console.log('用户点击取消');
  517. 							//   }
  518. 						}
  519. 					});
  520. 				}, 3200)
  521. 			},
  522. 			//===========================轮盘相关 end==================================
  523.  
  524. 		},
  525. 	}
  526. </script>
  527.  
  528. <style lang="less" scoped>
  529. 	.active {
  530. 		position: absolute;
  531. 		top: 50%;
  532. 		left: 50%;
  533. 		width: 150rpx;
  534. 		height: 150rpx;
  535. 		// background-color: #DD524D;
  536. 		transform: translate(-50%, -50%);
  537. 		line-height: 150rpx;
  538. 		text-align: center;
  539. 		border-radius: 50%;
  540. 		color: #fff;
  541.  
  542. 		&::before {
  543. 			content: '';
  544. 			width: 0;
  545. 			height: 0;
  546. 			border-left: 30rpx solid transparent;
  547. 			border-right: 30rpx solid transparent;
  548. 			border-bottom: 60rpx solid #DD524D;
  549. 			position: absolute;
  550. 			top: -40rpx;
  551. 			left: 50%;
  552. 			transform: translateX(-50%);
  553. 		}
  554.  
  555. 	}
  556.  
  557. 	.start {
  558. 		transition: all 3.5s cubic-bezier(0.09, 0.99, 0.72, 1);
  559. 	}
  560.  
  561. 	.box {
  562. 		position: relative;
  563. 		background-color: #007AFF;
  564. 		width: 700rpx;
  565. 		height: 700rpx;
  566. 		border-radius: 50%;
  567. 		margin: 50rpx auto;
  568. 		overflow: hidden;
  569. 		border: 1px solid #FFFFFF;
  570.  
  571. 		.box_item {
  572. 			&::after {
  573. 				position: absolute;
  574. 				content: '';
  575. 				height: 100%;
  576. 				width: 2rpx;
  577. 				right: 0;
  578. 				// transform: translateX(50%);
  579. 				background-color: #FFFFFF;
  580. 				transform-origin: 50% 50%;
  581. 				transform: rotate(22.5deg) translateX(5%);
  582. 			}
  583.  
  584. 			position: absolute;
  585. 			top: 0;
  586. 			left: 275rpx;
  587. 			width: 150rpx;
  588. 			height: 350rpx;
  589. 			transform-origin: 50% 100%;
  590. 			text-align: center;
  591. 			line-height: 140rpx;
  592.  
  593. 			&:nth-child(2) {
  594. 				transform: rotate(45deg);
  595. 			}
  596.  
  597. 			&:nth-child(3) {
  598. 				transform: rotate(90deg);
  599. 			}
  600.  
  601. 			&:nth-child(4) {
  602. 				transform: rotate(135deg);
  603. 			}
  604.  
  605. 			&:nth-child(5) {
  606. 				transform: rotate(180deg);
  607. 			}
  608.  
  609. 			&:nth-child(6) {
  610. 				transform: rotate(225deg);
  611. 			}
  612.  
  613. 			&:nth-child(7) {
  614. 				transform: rotate(270deg);
  615. 			}
  616.  
  617. 			&:nth-child(8) {
  618. 				transform: rotate(315deg);
  619. 			}
  620.  
  621. 		}
  622. 	}
  623.  
  624. 	.heng {
  625. 		background: #E0E3DA;
  626. 		width: 100%;
  627. 		height: 5rpx;
  628. 	}
  629. </style>

转载请注明，源码请联系

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/474804
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号