uni-client

import App from './App'
import store from './store'
import io from "pages/com/socket.io"


// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.socket = io('http://localhost:3100', {
	query: {},
	transports: ['websocket', 'polling'],
	timeout: 5000,
});

let socket = Vue.prototype.socket

socket.on("onlineRes", data => {
	console.log("rcv xxm res msg ")
	 uni.$emit('onlineRes',{msg:'onlineRes'})

})

socket.on("rcvMsg", data => {
	// console.log("rcv xxm res msg " + JSON.stringify(data))
	

})

// /home/10043467@zte.intra/.npm-global/bin/supervisor   app.js

// 引入:uView-UI
import uView from 'uview-ui';
Vue.use(uView);


App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif




<template>
	<view class="pages">

		<!-- 缘分首页 -->


		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none"
				:placeholder="inputPlaceholder" />
			<view class="cover-search-bar" @click="searchClick"></view>
		</view>

		<view class="t-a">

			<view class="line"></view>
			<input name="code" maxlength="6" placeholder="请输入用户id" v-model="uid" />


		</view>
		<button type="primary" @click="online()">上线</button>

		<view class="t-a">

			<view class="line"></view>
			<input name="code" maxlength="6" placeholder="请输入对方id" v-model="rcvid" />

		</view>


		<view class="t-a  ">

			<view class="line"></view>
			<input name="code" placeholder="请输入消息" v-model="msg" />

		</view>

		<button type="primary" @tap="sendmsg()">发送消息</button>






	</view>
</template>

<script>
	var cdbRef, currentWebview;
	// import Msg from "../com/Msg"
	// import msg from "../com/Msg.js"
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";


	function Msg(type, _content) {
		this.type = type
		this.content = _content
		this.sender = {
			uid: ''
		}
		this.receiver = {
			uid: ''
		}

	}


	export default {
		components: {
			statusBar
		},
		computed: {
			inputPlaceholder(e) {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				} else {
					return '请输入搜索内容'
				}
			}
		},
		data() {
			return {
				where: "",
				keyword: "",
				showRefresh: false,
				listHight: 0,
				uid: "",
				rcvid: '',
				msg: ''
			}
		},
		watch: {
			keyword(keyword, oldValue) {
				// let where = '"article_status" == 1 '
				// if (keyword) {
				// 	this.where = where + `&& /${keyword}/.test(title)`;
				// } else {
				// 	this.where = where;
				// }


			}
		},
		async onReady() {
			// #ifdef APP-NVUE
			/* 可用窗口高度 - 搜索框高 - 状态栏高 */
			this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 +
				'px';
			// #endif
			// #ifndef APP-NVUE
			this.listHight = 'auto'
			// #endif
			cdbRef = this.$refs.udb
			// this.online()




		},
		async onShow() {
			this.keyword = getApp().globalData.searchText
			getApp().globalData.searchText = ''
			//这里仅演示如何，在onShow生命周期获取设备位置，并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
			//你可以基于他做自己的业务，比如：根据距离由近到远排序列表数据等
			// uni.showLoading({
			// 	title:"获取定位中"
			// });

		},
		onLoad() {

			// this.socket.on("onlineRes",data=>{
			// 	console.log("rcv xxm res msg ")

			// })

			// this.socket.on("rcvMsg",data=>{
			// 	console.log("rcv xxm res msg " + JSON.stringify(data))

			// })

			uni.$on('onlineRes', function(data) {
				console.log('监听到事件来自 update ，携带参数 msg 111为：'  );
			})




		},
		methods: {

			online() {
				this.socket.emit("joinChat", {
					uid: this.uid
				})



			},

			sendmsg() {
				// console.log(" rcv id " + this.rcvid, +"   msg :" + this.msg)


				let m1 = new Msg("text", {
					text: this.msg
				})
				m1.sender.uid = this.uid
				m1.receiver.uid = this.rcvid

				// console.log(m1)
				this.socket.emit("sendmsg", m1)
			},


			searchClick(e) { //点击搜索框
				console.log("click search ")
				uni.navigateTo({
					url: '../filter/filter'
				})

			},
			retry() {
				this.refresh()
			},
			refresh() {
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
					// #ifdef APP-NVUE
					this.showRefresh = false
					// #endif
					console.log('end');
				})
				console.log('refresh');
			},
			loadMore() {
				cdbRef.loadMore()
			},
			onqueryerror(e) {
				console.error(e);
			},
			onpullingdown(e) {
				console.log(e);
				this.showRefresh = true
				if (e.pullingDistance > 100) {
					this.refresh()
				}
			}
		},
		// #ifndef APP-NVUE
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		}
		// #endif
	}
</script>

<style scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.pages {
		background-color: #FFFFFF;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}

	.main {
		justify-content: space-between;
	}

	.title {
		width: 480rpx;
		font-size: 32rpx;
	}

	.info {
		flex-direction: row;
		justify-content: space-between;
	}

	.author,
	.last_modify_date {
		font-size: 28rpx;
		color: #999999;
	}

	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		height: 50px;
		top: 0;
		left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 580rpx;
		/* #endif */
	}

	.cover-search-bar {
		height: 50px;
		position: relative;
		top: -50px;
		margin-bottom: -50px;
		/* #ifndef APP-NVUE */
		z-index: 999;
		/* #endif */
	}
</style>





	socket.on("joinChat", data => {
		console.log(JSON.stringify(data))
		userDict[data.uid] = socket.id
		socket.join(socket.id);
		console.log("now userdict :", JSON.stringify(userDict))
		sock.emit("onlineRes", {xx:1});
		console.log("send online res")
		
	})

	socket.on("sendmsg", data => {
		console.log("rcv sendmsg  ", JSON.stringify(data))
		// console.log("now userdict :", JSON.stringify(userDict))
		let to = userDict[data.receiver.uid] || ''
		if (to == '') {
			console.log(to + " not online ")
			return
		}
		socket.to(to).emit("rcvMsg", data);
	})