websocket

云对象

const ws = uniCloud.webSocketServer()
module.exports = {
    _onWebsocketConnection: async function(event) {
        // console.log('登录判断');
        const {
            connectionId,
            payload
        } = event
        await ws.send(connectionId, `${JSON.stringify(event)}`)
    },
    _onWebsocketMessage: function(event, content) {
      ws.send(event.connectionId, event.payload)
    },
    _onWebsocketDisConnection: async function(event) {
        await ws.send('关闭')
    },
    _onWebsocketError: async function(event) {
        await ws.send('错误')
    }
}

页面

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <input type="text" v-model="data" />
            <button @click="sendMsg">发送</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: '提交的数据',
                connectionId: '',
                exampleWebSocket: null
            }
        },
        async onLoad() {
            this.exampleWebSocket = await uniCloud.connectWebSocket({
                name: 'cusWebsocketObj',
                query: {}
            })
            this.exampleWebSocket.onOpen(event => {
                console.log("连接成功")
            })
            this.exampleWebSocket.onMessage(event => {
                uni.setStorageSync('connectionId', event.connectionId)
                this.connectionId = event.connectionId
                console.log(event.data);
            })
            this.exampleWebSocket.onClose(event => {
                console.log("关闭", event)
            })
            this.exampleWebSocket.onError(event => {
                console.log("错误", event)
            })
        },
        methods: {
            sendMsg() {
                this.exampleWebSocket.send({
                    data: this.data,
                    connectionId: this.connectionId
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

云端环境才可以连接,本地环境会报错

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容