快捷導(dǎo)航

uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊詳細(xì)步驟

更新時(shí)間：2023年11月27日 09:59:54 作者：青島前端大冤種

在開發(fā)程序過程中通信功能還是比較常用到的,下面這篇文章主要給大家介紹了關(guān)于uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近再辦一個(gè)uniapp做的即時(shí)通訊，把其中思路記載一下。

技術(shù)棧采用uniapp+uview+vue2進(jìn)行開發(fā)。

一、使用uni封裝好的websocket。

下面的從uniapp官網(wǎng)截圖的Api

uni.connectSocket() ：這個(gè)方法可以讓我們創(chuàng)建一個(gè)webSocket的連接，里面包含幾個(gè)參數(shù)，url是寫ws的連接地址，沒有的話肯定是連接不上服務(wù)器，其他的沒用過。用的時(shí)候再看。

// 創(chuàng)建webSocket
this.webSocketTask = uni.connectSocket({
	url: '這里面寫的是連接地址',
	header: {
	    'content-type': 'application/json'
	},
	success(res) {
		console.log('成功', res);
	},
})

我們在data中定義一個(gè)webSocket：null，然后把websocket對象賦給他，以供下面的方法使用。

uni.onSocketOpen()是用來監(jiān)聽websocket連接成功的事件，方法里面跟一個(gè)回調(diào)函數(shù)，可以通過res參數(shù)拿到響應(yīng)頭。

//監(jiān)聽WebSocket連接打開事件
this.webSocketTask.onOpen((res) => {
	console.info("監(jiān)聽WebSocket連接打開事件", res)
});

這個(gè)沒用過，過?。?！

通過uni.onSocketMessag()可以接收到服務(wù)器返回的消息。

//接收websocket消息及處理
this.webSocketTask.onMessage((res) => {
	let data = JSON.parse(res.data);
//判斷服務(wù)器返回的type類型
	switch (data.type){
		//如果返回的ping，說明服務(wù)端ping客戶端
		case 'ping':
            //我們要給服務(wù)器說一個(gè)pong告訴服務(wù)器我還活著
			this.webSocketTask.send({
				data: JSON.stringify({
					type: 'pong'
				})
			});
			break;
		//登錄更新用戶列表
        //如果type是init，說明服務(wù)器知道我們活著，給我們傳一個(gè)標(biāo)識，我們通過這個(gè)標(biāo)識去請求接口，                            
          建立唯一鏈接。
		case 'init':
			uni.setStorageSync('client_id', data.client_id);
			this.$u.post('common/pub/bindUid',{
				client_id: data.client_id,
				user_id: this.userId
			}).then(res => {
				this.webSocketTask.send({
					data: JSON.stringify({
						type: 'bindUid',
						user_id:2
					})
				});
			});
			break;
		case 'simple':
			this.userList.push(data.data)
			this.scrollToBottom()
			break;
		case 'group':
			this.userList.push(data.data)
			this.scrollToBottom()
			break
	}

這個(gè)的話按官方文檔說的就是需要卸載uni。onSocketOpen回調(diào)里面才行。但是我直接通過實(shí)例對象發(fā)也可以。

this.webSocketTask.send({
	data: JSON.stringify({type: 'pong'})
});

注意：websocket只能接收字符串，記得轉(zhuǎn)換類型

這個(gè)就是關(guān)閉連接，寫在onUnload鉤子中就行

onUnload(){
	uni.closeSocket({
		success:() => {
			console.info("退出成功")
		},
	})
},

最后一個(gè)就是監(jiān)聽websocket是否關(guān)閉。

uniapp官網(wǎng)文檔：uni.connectSocket(OBJECT) | uni-app官網(wǎng) (dcloud.net.cn)

https://uniapp.dcloud.net.cn/api/request/websocket.html

uni-app官網(wǎng) (dcloud.net.cn)

https://uniapp.dcloud.net.cn/api/request/socket-task.html

完整代碼：

onLoad(){
    this.socket()
};
methods:{
    socket(){
    //創(chuàng)建webSocket
    this.webSocketTask = uni.connectSocket({
	    url: 'ws地址',
		header: {
			'content-type': 'application/json'
		},
		success(res) {
			console.log('成功', res);
		},
	})
	// 監(jiān)聽WebSocket連接打開事件
	this.webSocketTask.onOpen((res) => {
		console.info("監(jiān)聽WebSocket連接打開事件", res)
	});
	// 監(jiān)聽WebSocket錯(cuò)誤
	uni.onSocketError((res) => {
		console.info("監(jiān)聽WebSocket錯(cuò)誤" + res)
	});
}
onShow(){
    // 接收websocket消息及處理
    this.webSocketTask.onMessage((res) => {
		let data = JSON.parse(res.data);
		switch (data.type) {
			// 服務(wù)端ping客戶端
			case 'ping':
				this.webSocketTask.send({
					data: JSON.stringify({
						type: 'pong'
					})
				});
				break;
			// 登錄 更新用戶列表
			case 'init':
				uni.setStorageSync('client_id', data.client_id);
				this.$u.post('接口', {
					client_id: data.client_id,
					user_id: this.userId
				}).then(res => {
					this.webSocketTask.send({
						data: JSON.stringify({
							type: 'bindUid',
							user_id: this.userId
						})
					});
				});
				break;
			case 'simple':
				this.userList.push(data.data)
				this.scrollToBottom()
				break;
			case 'group':
				// this.groupMenuList()
				this.userList.push(data.data)
				this.scrollToBottom()
				break
		}
	});
}
onUnload() {
	uni.closeSocket({
		success: () => {
			console.info("退出成功")
		},
	})
},

只是個(gè)人簡單記錄?。?！

總結(jié)

到此這篇關(guān)于uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊的文章就介紹到這了,更多相關(guān)uniapp用websocket即時(shí)通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: