阅读量:0
最近再办一个uniapp做的即时通讯，把其中思路记载一下。
技术栈采用uniapp+uview+vue2进行开发。
一、使用uni封装好的websocket。
下面的从uniapp官网截图的Api
uni.connectSocket() ：这个方法可以让我们创建一个webSocket的连接，里面包含几个参数，url是写ws的连接地址，没有的话肯定是连接不上服务器，其他的没用过。用的时候再看。
// 创建webSocket this.webSocketTask = uni.connectSocket({ url: '这里面写的是连接地址', header: { 'content-type': 'application/json' }, success(res) { console.log('成功', res); }, })我们在data中定义一个webSocket：null，然后把websocket对象赋给他，以供下面的方法使用。
uni.onSocketOpen()是用来监听websocket连接成功的事件，方法里面跟一个回调函数，可以通过res参数拿到响应头。
//监听WebSocket连接打开事件 this.webSocketTask.onOpen((res) => { console.info("监听WebSocket连接打开事件", res) });
这个没用过，过！！！
通过uni.onSocketMessag()可以接收到服务器返回的消息。
//接收websocket消息及处理 this.webSocketTask.onMessage((res) => { let data = JSON.parse(res.data); //判断服务器返回的type类型 switch (data.type){ //如果返回的ping，说明服务端ping客户端 case 'ping': //我们要给服务器说一个pong告诉服务器我还活着 this.webSocketTask.send({ data: JSON.stringify({ type: 'pong' }) }); break; //登录更新用户列表 //如果type是init，说明服务器知道我们活着，给我们传一个标识，我们通过这个标识去请求接口， 建立唯一链接。 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 }
这个的话按官方文档说的就是需要卸载uni。onSocketOpen回调里面才行。但是我直接通过实例对象发也可以。
this.webSocketTask.send({ data: JSON.stringify({type: 'pong'}) });注意：websocket只能接收字符串，记得转换类型
这个就是关闭连接，写在onUnload钩子中就行
onUnload(){ uni.closeSocket({ success:() => { console.info("退出成功") }, }) },
最后一个就是监听websocket是否关闭。
uni-app官网 (dcloud.net.cn)
https://uniapp.dcloud.net.cn/api/request/socket-task.html完整代码：
onLoad(){ this.socket() }; methods:{ socket(){ //创建webSocket this.webSocketTask = uni.connectSocket({ url: 'ws地址', header: { 'content-type': 'application/json' }, success(res) { console.log('成功', res); }, }) // 监听WebSocket连接打开事件 this.webSocketTask.onOpen((res) => { console.info("监听WebSocket连接打开事件", res) }); // 监听WebSocket错误 uni.onSocketError((res) => { console.info("监听WebSocket错误" + res) }); } onShow(){ // 接收websocket消息及处理 this.webSocketTask.onMessage((res) => { let data = JSON.parse(res.data); switch (data.type) { // 服务端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("退出成功") }, }) },只是个人简单记录！！！
