uniapp使用websocket实现消息的实时通信

实现过程：

1.下图所示文件内编写代码

 

 

 

 

 2.main.js文件下全局引入store

 3.获取第一步websocketInit()下的URL

使用API的方法

 

 由于URL包含后端记录的userId

 要在user文件里进行修改

 在上面的文件里添加USERID的字段

 

 

 总结：在消息界面调用this.$store.state.websocketData时无法将该字段进行传值，也就是说只能将this.$store.state.websocketData与,<view>界面连接比如说:

<view v-else>
                <uni-card class="todo_first"
                    thumbnail="/static/pictures/xietong.png" 
                    title="新协同消息"
                    :extra="this.$store.state.wsSynergyDate.createTime"
                    @click="handlemesSynergy">
                     <view>
                        <h5 class="todo_0">
                            <view > <text>{{this.$store.state.wsSynergyDate.creatorName}}</text> </view>
                            <view class="flex"> 
                                <text>{{this.$store.state.wsSynergyDate.msgTitle}}：</text>
                                <text>{{this.$store.state.wsSynergyDate.msgContent}}</text> 
                            </view>
                        </h5>
                    </view>
                </uni-card>
            </view>
        </view>

还有个问题：当我app退出登录或者结束运行后，再次登录APP消息界面为空，我通过连接消息表单与websocket同时使用，解决这个问题。也就是当没有新消息时我调用表单的第一条消息，有新通知则连接websocket。如下图

 

 

本篇文章主要参考《uni-app全局使用websocket收发数据》并做了一些改动。声明本文章只记录自己的学习过程。只接受友好技术讨论。不接受批评。爱看不看