devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp+websocket聊天功能实现（超详细！！附代码，可直接复用）_uniapp使用websocket建立聊天室

作者：菜鸟追梦旅行 | 2024-02-18 05:16:34

赞

踩

uniapp使用websocket建立聊天室

最近项目上用到了聊天的功能，下面来分享一下关于websocket，键盘弹出等问题，避免别的朋友踩坑。

先给大家看看效果图 

 接着进入正文了！！！！！

一、需要注意的几个点

1.scroll-view的高度

先看看整体的页面布局

 system.windowHeight ： 页面总高度

totalHeight：顶部导航栏高度

sendHeight：底部输入框高度 (设置样式的时候自己设置的)

keyboardHeight：键盘高度（键盘没有弹出的时候为0）

  1. 	            uni.getSystemInfo({
  2. 					success: res => {
  3. 						this.system = res
  4. 					}
  5. 				})
  6.  
  7. 				// #ifdef MP-WEIXIN
  8. 				//获取胶囊信息
  9. 				this.menu = uni.getMenuButtonBoundingClientRect()
  10.  
  11. 				//计算组件高度
  12. 				this.statusBarHeight = this.system.statusBarHeight //状态栏高度
  13. 				this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
  14. 				this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
  15. 				// 保存到全局
  16. 				this.$store.state.totalHeight = this.totalHeight
  17. 				this.$store.state.system = this.system
  18. 				// #endif
  19.  
  20. 				// #ifdef APP
  21. 				this.statusBarHeight = this.system.statusBarHeight //状态栏高度
  22. 				this.navigatorHeight = this.system.statusBarHeight + 45 //导航栏高度
  23. 				this.totalHeight = this.navigatorHeight //总高度
  24. 				// 保存到全局
  25. 				this.$store.state.totalHeight = this.totalHeight
  26. 				this.$store.state.system = this.system
  27.  
  28. 				// #endif

这里需要注意的是scroll-view没有高度就和view差不多，scroll-into-view属性就不生效。

2.键盘弹起时，使页面向上移动，顶部导航栏不动

使用textarea原生的键盘弹起时，页面向上移是这样的

 解决后的图片：

 是不是看着顺眼多了

首先的话需要在页面加载的时候监听一下键盘的高度

  1. 		listenerKeyboardHeight() {
  2. 			this.listener = (res) => {
  3. 				console.log("键盘高度", res.height)
  4. 				this.keyboardHeight = res.height
  5. 				this.$nextTick(() => {
  6. 					this.scrollToBottom()
  7. 				})
  8. 			}
  9. 			uni.onKeyboardHeightChange(this.listener)
  10. 		}

当键盘弹出的时候，将scroll-view的高度减去键盘高度，底部发送框向上移动‘键盘高度’的px

底部的发送框一般都是position: fixed;来定位的，将bottom属性变一下就行了

  1. 		<view class="information-box lky-flex-items-center" :style="{bottom: bottom+'px'}">
  2. 			<view style="margin-right: 20rpx; width: 100%">
  3. 				<u--textarea :confirmType="null" v-model="value" placeholder="请输入" height="40rpx" :showConfirmBar="false"
  4. 					:placeholderStyle="placeholderStyle" @focus="textfocus" :adjustPosition="false" />
  5. 			</view>
  6. 			<image src="@/static/images/chat/icon_attachment.svg" class="icon" v-if="isUploadFile" @click="openFile" />
  7. 			<image src="@/static/images/chat/icon_send.svg" class="icon" @click="send" />
  8. 		</view>

3.定位到底部

先再来看看我们的页面布局

最后一条是用于定位到底部的

  1. <!-- 用于定位到底部 -->
  2. <view id="last-msg-item" style="height: 1px;"></view>

方法：

  1. 		// 定位到底部
  2. 		scrollToBottom() {
  3. 			this.$nextTick(() => {
  4. 				this.scrollIntoView = "last-msg-item"
  5.                 // 清空，为下一次定位做准备
  6. 				this.$nextTick(() => {
  7. 					this.scrollIntoView = ""
  8. 				})
  9. 			})
  10. 		},

二、websocket代码

这是封装的一个mixin类

  1. import {
  2. 	socket
  3. } from "@/common/mixin/socket.js"
  4.  
  5. //引入方法
  6. export default {
  7.     mixins: [socket],
  8. }

socket.js

  1. export const socket = {
  2. 	data() {
  3. 		return {
  4. 			// socket是否开启
  5. 			socketOpen: false,
  6. 			// 定时器
  7. 			timer: null,
  8.  
  9. 			// 链接
  10. 			surl: `websocket链接`,
  11.  
  12. 			// 底部id用于定位到底部
  13. 			scrollIntoView: "",
  14.  
  15. 			// 键盘高度
  16. 			keyboardHeight: 0,
  17.  
  18. 			// 监听键盘高度的方法
  19. 			listener: null
  20. 		}
  21. 	},
  22.  
  23. 	onLoad(option) {
  24. 		// 开启键盘高度监听
  25. 		this.listenerKeyboardHeight()
  26.  
  27. 		// socket初始化
  28. 		this.init()
  29.  
  30. 		// 定时器，定时判断socket有没有掉线
  31. 		this.timer = setInterval(() => {
  32. 			this.isSocketConnct()
  33. 		}, 2000)
  34.  
  35. 	},
  36. 	beforeDestroy() {
  37. 		// 关闭定时器
  38. 		clearInterval(this.timer)
  39.  
  40. 		// 关闭键盘高度监听
  41. 		uni.offKeyboardHeightChange(this.listener)
  42.  
  43. 		// 关闭Socket
  44. 		this.closeSocket()
  45. 	},
  46. 	methods: {
  47. 		// 发送消息
  48. 		sendSocketMessage(msg) {
  49. 			console.log("发送消息", msg);
  50. 			let that = this
  51. 			if (this.socketOpen) {
  52. 				uni.sendSocketMessage({
  53. 					data: msg,
  54. 					success: (res) => {
  55. 						setTimeout(() => {
  56.                             // json转对象
  57. 							let param = JSON.parse(msg)
  58. 							that.sendMessageHandle(param)
  59. 						}, 300)
  60. 					},
  61. 					fail(err) {
  62. 						// 发送失败处理
  63. 					}
  64. 				});
  65. 			} else {
  66. 				// Socket没有开启，重新连接并重新发送消息
  67. 				this.init()
  68. 				setTimeout(() => {
  69. 					this.sendSocketMessage(msg)
  70. 				},300)
  71. 			}
  72. 		},
  73.  
  74. 		// 判断是否连接
  75. 		isSocketConnct() {
  76. 			if (!this.socketOpen) {
  77. 				console.log("WebSocket 再次连接！");
  78. 				this.init()
  79. 			}
  80. 		},
  81.  
  82. 		// 初始化
  83. 		init() {
  84. 			this.connect()
  85. 			this.openSocket()
  86. 			this.onclose()
  87. 			this.onSocketMessage()
  88. 		},
  89.  
  90. 		// 建立连接
  91. 		connect() {
  92. 			console.log(this.surl);
  93. 			uni.connectSocket({
  94. 				url: this.surl,
  95. 				method: 'GET'
  96. 			});
  97. 		},
  98.  
  99. 		// 监听关闭
  100. 		onclose() {
  101. 			let that = this
  102. 			uni.onSocketClose((res) => {
  103. 				that.socketOpen = false
  104. 				console.log('WebSocket 已关闭！');
  105. 			});
  106. 		},
  107.  
  108. 		// 关闭
  109. 		closeSocket() {
  110. 			uni.closeSocket();
  111. 		},
  112.  
  113. 		// 打开Soceket
  114. 		openSocket() {
  115. 			let that = this
  116. 			uni.onSocketOpen((res) => {
  117. 				that.socketOpen = true
  118. 				console.log('WebSocket连接已打开！');
  119. 			});
  120. 		},
  121.  
  122. 		// 接收事件
  123. 		onSocketMessage() {
  124. 			let that = this
  125. 			uni.onSocketMessage((res) => {
  126. 				let obj = JSON.parse(res.data)
  127. 				console.log("接收事件", obj);
  128. 				this.onMessageHandle(obj)
  129. 			});
  130. 		},
  131.  
  132. 		// 接收到事件后处理的方法（可自己重写）
  133. 		onMessageHandle(obj) {
  134. 			// 根据自己业务逻辑重写
  135. 		},
  136.  
  137. 		// 发送消息后处理的方法（可自己重写）
  138. 		sendMessageHandle(msg) {
  139. 			// 根据自己业务逻辑重写
  140. 		},
  141.  
  142.  
  143. 		// 定位到底部
  144. 		scrollToBottom() {
  145. 			this.$nextTick(() => {
  146. 				this.scrollIntoView = "last-msg-item"
  147. 				this.$nextTick(() => {
  148. 					this.scrollIntoView = ""
  149. 				})
  150. 			})
  151. 		},
  152.  
  153.         // 开启键盘高度的监听
  154. 		listenerKeyboardHeight() {
  155. 			this.listener = (res) => {
  156. 				console.log("键盘高度", res.height)
  157. 				this.keyboardHeight = res.height
  158. 				this.$nextTick(() => {
  159. 					this.scrollToBottom()
  160. 				})
  161. 			}
  162. 			uni.onKeyboardHeightChange(this.listener)
  163. 		}
  164. 	}
  165.  
  166. }

直接引入就可以使用啦 ， 接下来说说几个可能用到的方法，在自己的页面直接用就可以啦

  1. 	// 发送消息方法
  2. 	send(value) {
  3.         // 自定义消息体
  4. 		let param = {
  5. 			"type": 1,
  6. 			"content": value,
  7. 	   	}
  8.  
  9.         // 对象转json
  10. 		let m = JSON.stringify(param)
  11. 		this.sendSocketMessage(m)
  12. 	},
  1. 			// 接收到事件后处理的方法（可自己重写）
  2. 			onMessageHandle(obj) {   
  3.                 // obj 接收到的事件对象
  4. 			},
  5.  
  6. 			// 发送消息后处理的方法（可自己重写）
  7. 			sendMessageHandle(msg) {
  8. 				// msg 发送的消息对象
  9. 			}

三、页面布局代码

  1. <template>
  2. 	<view>
  3.         <!-- 自定义顶部导航栏 用原生的话下面scroll-view应该可以不用减去导航栏的高度的-->
  4. 		<u-navbar :placeholder='true' :autoBack='true' leftIconSize='40rpx'>
  5. 			<view class="navbar-title" slot="center">{{navbarTitle}}</view>
  6. 		</u-navbar>
  7.  
  8. 		<scroll-view 
  9.             scroll-y="true" 
  10.             class="content-box" id="chat"
  11. 			:style="{'height':system.windowHeight - totalHeight - sendHeight - keyboardHeight+'px' }"
  12. 			:scroll-into-view='scrollIntoView'>
  13. 			<lky-gap size='40' />
  14. 			<view id="msglistview"></view>
  15. 			<view id="last-msg-item" style="height: 1px;"></view>
  16. 		</scroll-view>
  17.  
  18. 		<lky-send 
  19.             @send="send" 
  20.             :is-upload-file="false" 
  21.             @imageSend="imageSend" 
  22.             @fileSend="fileSend"
  23. 			:bottom-copy='keyboardHeight'></lky-send>
  24. 	</view>
  25. </template>
  26.  
  27. <script>
  28.  
  29. 	import {
  30. 		mapState
  31. 	} from 'vuex'
  32.  
  33. 	import {
  34. 		socket
  35. 	} from "@/common/mixin/socket.js"
  36.  
  37.  
  38. 	import LkySend from "../component/lky-p-send/lky-p-send.vue"
  39.  
  40. 	export default {
  41. 		components: {
  42. 		},
  43. 		mixins: [socket],
  44. 		data() {
  45. 			return {
  46. 				src: '',
  47.                 
  48.                 // 聊天记录列表
  49. 				messageList: [],
  50.  
  51.                 // socket链接，如果在socket.js中改了的话就不用写这个了
  52. 				surl: ``,
  53.  
  54. 			};
  55. 		},
  56.         
  57.         //  我的高度存在vuex的
  58. 		computed: mapState([
  59. 			"totalHeight", "system", "sendHeight"
  60. 		]),
  61.  
  62. 		onLoad(option) {
  63. 			// 获取聊天记录
  64. 			this.messageList = uni.getStorageSync(`messageList_${this.$store.state.userInfo.id}`) || []
  65. 			console.log("缓存中的聊天记录", this.messageList);
  66. 			this.scrollToBottom()
  67. 		},
  68.  
  69. 		methods: {
  70.  
  71. 			send(value) {
  72. 				let param = {
  73. 					"type": 1,
  74. 					"content": value,
  75. 				}
  76. 				let m = JSON.stringify(param)
  77. 				this.sendSocketMessage(m)
  78. 			},
  79.  
  80.  
  81.             // 预览图片
  82. 			imageClick(url) {
  83. 				uni.previewImage({
  84. 					urls: [
  85. 						url
  86. 					]
  87. 				})
  88. 			},
  89.  
  90.             // 发送图片
  91. 			imageSend(url) {
  92. 				let param = {
  93. 					"type": 3,
  94. 					"text": "",
  95. 					"url": url,
  96. 					"userId": this.$store.state.userInfo.id
  97. 				}
  98. 				let m = JSON.stringify(param)
  99. 				this.sendSocketMessage(m)
  100. 			},
  101.  
  102.             // 发送文件
  103. 			fileSend(url, name) {
  104. 				let param = {
  105. 					"type": 4,
  106. 					"text": name,
  107. 					"url": url,
  108. 					"userId": this.$store.state.userInfo.id
  109. 				}
  110. 				let m = JSON.stringify(param)
  111. 				this.sendSocketMessage(m)
  112. 			},
  113.             
  114.             // 打开文件
  115. 			openFile(item) {
  116. 				uni.downloadFile({
  117. 					url: item.url,
  118. 					success: (res) => {
  119. 						var filePath = res.tempFilePath;
  120. 						uni.openDocument({
  121. 							filePath: filePath,
  122. 							showMenu: true,
  123. 							success: function(res) {}
  124. 						});
  125. 					}
  126. 				});
  127. 			},
  128.  
  129. 			// 接收到事件后处理的方法（可自己重写）
  130. 			onMessageHandle(obj) {
  131.                 //根据业务逻辑重写
  132.                 // obj接收到的事件
  133.  
  134. 			},
  135.  
  136. 			// 发送消息后处理的方法（可自己重写）
  137. 			sendMessageHandle(msg) {
  138. 				 //根据业务逻辑重写
  139.                 // msg 发送的消息
  140. 			},
  141. 		}
  142. 	}
  143. </script>
  144.  
  145. <style lang="scss">
  146. 	body {
  147. 		box-sizing: border-box;
  148. 		padding: 0 ;
  149. 		background-color: $lky-hui-bg ;
  150. 	}
  151. </style>
  152.  
  153. <style lang="scss" scoped>
  154.  
  155. 	.content-box {
  156. 		padding: 0 28rpx;
  157. 		box-sizing: border-box;
  158. 		height: auto;
  159. 		z-index: -1;
  160. 		overflow: hidden;
  161. 	}
  162. </style>

到这里一个聊天的功能就结束了 ，这应该已经很详细了，其余的自己根据自己的业务逻辑和ui进行调整就行了！


最后有什么不足的地方也请各位指正优化一下

结束！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/105091
推荐阅读
相关标签

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

  

闽ICP备14008679号