使用uniapp实现websocket聊天功能

在APP.vue里面配置  URL里面填写的是自己的地址

官方文档https://uniapp.dcloud.net.cn/api/request/websocket.html#closesocket

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')

		},
		onShow: function() {
			console.log('App Show')
			// 获取用户id（发送者）
			let id = uni.getStorageSync('id')
			// 创建ws连接
			uni.connectSocket({
				url: ''
			});
			// 监听ws打开状态
			uni.onSocketOpen((res) => {
				// console.log(123);
				console.log('连接成功');
				// 绑定发送id
				// ws链接状态
				setInterval(() => {
					console.log(111)
					uni.sendSocketMessage({
						data: JSON.stringify({
							type: `ping`,
						})
					});
				}, 1500);
				console.log('WebSocket连接已打开！');
			});
			
			let ta = this
			// ws监听接受消息
			uni.onSocketMessage((res) => {
				console.log(res.data)
				console.log(JSON.parse(res.data), 'aaaa');
				if (JSON.parse(res.data).type == 'chat') {
					that.data.push({
						...JSON.parse(res.data)
					})
				}
			});
			uni.onSocketError((res) => {
				console.log('WebSocket连接打开失败，请检查！', res);
				uni.connectSocket({
					url: ''
				});
			});
			uni.onSocketClose((res) => {
				console.log('WebSocket 已关闭！');
				uni.connectSocket({
					url: ''
				});
			});

		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

聊天列表页面的实现  可以根据自己的样式做调整

<template>
	<view>
		<div style="height: 30rpx"></div>
		<!-- 消息列表 -->
		<div class="big" v-for="(item,index) in data" :key="index" @click="goTalk(item.receive,item.img)">
			<div style="width: 10px"></div>
			<image :src="'http://wcy.jingyi.icu/'+item.img" mode="" class="Ai"></image>
			<div style="width: 10px"></div>
			<div class="contentOne">
				<div style="height: 10px"></div>
				<div class="Tow">
					<p class="text">{
   
   {item.name}}</p>
					<p>{
   
   {item.addtime}}</p>
				</div>
				<div style="height: 20rpx"></div>
				<div class="titleCon">{
   
   {item.content}}</div>
				<div style="height: 10rpx"></div>
			</div>
		</div>
		<u-tabbar :value="value" :placeholder="false" @change="change1" :fixed="true" :safeAreaInsetBottom="false">
			<u-tabbar-item text="首页" icon="home" @click="change"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat" :badge="num" @click="change"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

聊天记录页面布局的实现

<template>
	<view class="chat">
		<scroll-view :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview" scroll-y="true"
			:scroll-top="scrollTop" class="scroll-view">
			<!-- 聊天主体 -->
			<view id="msglistview" class="chat-body">
				<!-- 聊天记录 -->
				<view v-for="(item,index) in data" :key="index">
					<!-- <view class="nows_time">
						<view class="am_pm_time">{
   
   {item.addtime}}</view>
					</view> -->
					<!-- 自己的内容 -->
					<view class="item self" v-if="item.sender == id">
						<!-- 文字内容 -->
						<view class="content right">
							{
   
   {item.content}}
						</view>
						<view class="avatar">
							<image :src="Himg" mode=""></image>
						</view>
					</view>
					<!-- 左侧内容 -->
					<view class="item Ai" v-if="item.sender != id">
						<view class="avatar">
							<image :src="Timg" mode=""></image>
						</view>
						<!-- 文字内容 -->
						<view class="content left">
							{
   
   {item.content}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 防止聊天消息被发送框遮挡 -->
		<view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
			<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
				<view class="uni-textarea">
					<textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
						:show-confirm-bar="false" @linechange="sendHeight" auto-height></textarea>
				</view>
				<button @tap="sends" class="send-btn">发送</button>
			</view>
		</view>
	</view>
</template>