uni-app+vue3 +uni.connectSocket 使用websocket

前言

  • 最近在uni-app+vue3+websocket实现聊天功能,在使用websocket还是遇到很多问题

  • 这次因为是app手机应用,就没有使用websocket对象,使用的是uni-app的uni.connectSocket

  • 为了方便测试这次用的是node.js一个简单的dom,来联调模拟发数据,过程有意思

首先模拟一个node.js服务来测试-代码实现

1.在桌面建立一个空文件夹-命名英文

2.打开cmd

3.初始化-下包

javascript 复制代码
// 初始化包
npm init -y
​
// 下载node框架包
npm i express --save
​
// 下载websocket模块
npm i ws

4.回到项目根文件创建根文件-app.js-代码如下

javascript 复制代码
// 引入express框架
var app = require('express')();
var server = require('http').Server(app);
​
// 引入ws框架支持webSocket实现
var WebSocket = require('ws');
​
// 针对8080接口进行监听
var wss = new WebSocket.Server({ port: 8080 });
​
// 当建立连接后,打印日志
wss.on('connection', function connection(ws) {
​
    console.log('建立连接');
    // 同时返回服务端收到的信息
    ws.on('message', function incoming(message) {
        // const buffer = Buffer.from(message,'hex')
        // console.log('ddd',buffer.toString('utf-8'));
        // console.log('message',message);
        console.log('接受前端消息: %s', message);
    });
​
    // 返回信息
    ws.send('接收到消息了');
});
​
// 绑定访问地址
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});
​
app.listen(3000);

5.来到终端运行服务

javascript 复制代码
node ./app.js

6.websocket服务地址

javascript 复制代码
本机ip+3000端口

来到uni-app+vue3项目

1.来到工具文件utils下创建websocket.js 文件-代码如下

javascript 复制代码
import {
    ref
} from "vue"
​
​
const websoket = ref(null);
​
​
const webSoketInit = (role, id) => {
​
    const wsUrl = "ws://localhost:8080"
​
    // return Promise
​
    websoket.value = uni.connectSocket({
        url: wsUrl,
        success: () => {
            console.log('websoket连接成功');
        },
        fail: () => {
            console.log('websoket连接失败');
            uni.showToast({
                title: 'websoket连接失败',
                icon: 'error',
                duration: 2000,
            });
        },
    });
​
    websoket.value.onOpen((res) => {
        
        if (websoket.value.readyState === 1) {
            websoket.value.send({
                data: '测试回复',
            })
        }
​
    });
​
    websoket.value.onClose(() => {
        console.log('已经被关闭了');
    });
​
    websoket.value.onMessage((res) => {
        console.log('接收到后端发送消息', res);
    });
​
};
​
// 获取websocket对象
const getWebSocket = () => {
    return websoket
};
​
​
// 关闭websocket【离开这个页面的时候执行关闭
const closeSocket = () => {
    websoket.value.close({
        success(res) {
            this.is_open_socket = false;
            console.log('关闭成功', res);
        },
        fail(err) {
            console.log('关闭失败', err);
        },
    });
};
​
const sendMessage = (message) => {
    console.log("发送消息", message)
​
    if (websoket.value.readyState === 1) {
        websoket.value.send({
            data: message,
        })
    }
};
export {
    getWebSocket,
    websoket,
    webSoketInit,
    closeSocket,
    sendMessage,
};
复制代码

2.来到任意页面-初始化建立连接

javascript 复制代码
<script setup>
    import {
        nextTick
    } from "vue"
​
    import {
        onLoad,
        onReady
    } from "@dcloudio/uni-app";
​
​
    // websocket 通讯
    import {
        getWebSocket,
        websoket,
        webSoketInit,
        closeSocket,
        sendMessage
    } from "@/utils/webSocket.js"
​
    // 判断当前视口大小
    onLoad((options) => {
        webSoketInit()
    })
    onReady(() => {
    
​
        // 获取websocket对象
        let ws = getWebSocket()
​
​
        // 接受后端消息触发
        ws.value.onMessage((e) => {
            console.log('接受后端消息', e);
        })
    })
</script>
复制代码

3.如图-代码效果

注意细节

1.前端使用websoket.value.send() 发送消息时后端接收一直都是undefined

  • 因为我们不是使用的浏览器的websocket对象,使用的是uni-app封装过一层的uni.connectSocket

  • 想在我们的实例对象是uni.connectSocket,需要按照uni-app的格式发送数据({data:'数据'})

  • 官网地址-uni.connectSocket(OBJECT) | uni-app官网

  • 如图

2.真机模拟时发现只有运行连接成功接收到消息,再用按钮触发后端服务也收不到消息-连接是成功的

  • 因为本机运行到浏览器测试时,是可以访问到自己内网服务

  • 真机运行虽然也是局域网连接wifi-但手机机制可能只会去公网上找-意思就是服务要上线


总结:

经过这一趟流程下来相信你也对 uni-app+vue3 +uni.connectSocket 使用websocket 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

有什么不足的地方请大家指出谢谢 -- 風过无痕

相关推荐
JaneJiazhao3 分钟前
HTTPSOK:SSL/TLS证书自动续期工具
服务器·网络协议·ssl
JaneJiazhao4 分钟前
HTTPSOK:智能SSL证书管理的新选择
网络·网络协议·ssl
瑶琴AI前端2 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
城南vision2 小时前
计算机网络——HTTP篇
网络协议·计算机网络·http
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
点点滴滴的记录13 小时前
RPC核心实现原理
网络·网络协议·rpc
程思扬14 小时前
为什么Uptime+Kuma本地部署与远程使用是网站监控新选择?
linux·服务器·网络·经验分享·后端·网络协议·1024程序员节
海绵波波10715 小时前
Webserver(4.8)UDP、广播、组播
单片机·网络协议·udp
尚学教辅学习资料17 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱