392  
查询码:00000579
uni-app的爬坑之路(2)-WebSocket
作者: 钱钟书 于 2019年12月26日 发布在分类 / 人防组 / 人防移动端 下,并于 2019年12月26日 编辑
uni-app WebSocket wss ws

uni-app如何连接 WebSocket?

简单、粗暴、直接上步骤

(1) 后端提供的WebSocket地址是否能正常连接成功,在线测试网址。

测试网址1

测试网址2

(2) uni-app连接 websocket 官方文档。

浏览官网

(3) Websocket相关方法

① 连接


uni.connectSocket(OBJECT)


② 打开


uni.onSocketOpen(CALLBACK)


③ 发送


uni.sendSocketMessage(OBJECT)


④ 接收


uni.onSocketMessage(CALLBACK)


⑤ 关闭


uni.closeSocket(OBJECT)


(4) 代码示例

① store/module目录下创建全局 websocket.js


const websocket = {
	state: {
		websock: null,
		hasConnected: false,
	},
	mutations: {
		setConnection(state, websock) {
			state.websock = websock
		},
		sethasConnected(state, hasConnected) {
			state.hasConnected = hasConnected;
		}
	},
	getters: {
		STAFF_UPDATE(state) {
			return state.websock
		}
	},
	actions: {
		STAFF_WEBSOCKET({
			state,
			commit
		}) {
			return new Promise(async (resolve, reject) => {
				let socketTask = uni.connectSocket({
					url: 'ws://serveraddress/ws',
					header: {
						'content-type': 'application/json'
					},
					success: function() {
						console.log("连接成功");
					}
				})
				commit('setConnection', socketTask);
				commit('sethasConnected', true);

				//连接
				websocket.state.websock.onOpen((res) => {
					console.log("连接正常" + res);
					const userid = uni.getStorageSync('userid');
					let actions = {
						SenderID: userid,
						ReceiverID: "",
						Content: "",
						MessageType: "",
						TableRowGuid: "",
						MessageType: ""
					};
					websocket.state.websock.send({
						data: JSON.stringify(actions),
						success: () => {
							console.log("发送成功");
						}
					});
				});

				//接收消息
				websocket.state.websock.onMessage(function(res) {
					console.log("接收服务器消息:" + res.data)
				})

				//关闭
				websocket.state.websock.onClose((res) => {
					console.log("关闭");
				})

				//异常
				websocket.state.websock.onError((res) => {
					console.log("异常");
				})
			});
		}
	}
}
export default websocket

② store/index.js引用 websocket.js 并注入


③ App.vue文件中初始化连接方法


(5) 遇到的坑?

① 地址错误

服务器接口是ws://协议,小程序中必须是 wss:// 协议

② 由小程序项目转换的uni-app项目 , 连接失败

浏览器运行直接访问需访问https协议的,更改 Server 协议

若不更改Server协议,需连手机端直接调试,不得使用浏览器直接运行


 



 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-26 16:29:28[当前版本] 钱钟书 v1.1
2019-12-26 16:28:42 钱钟书 v1.0

 附件

附件类型

JPGJPG PNGPNG

知识分享平台 -V 4.8.7 -wcp