使用uniapp实现websocket聊天功能

简介: 使用uniapp实现websocket聊天功能

在APP.vue里面配置  URL里面填写的是自己的地址

<script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
    },
    onShow: function() {
      console.log('App Show')
      // 获取用户id(发送者)
      let id = uni.getStorageSync('id')
      // 创建ws连接
      uni.connectSocket({
        url: ''
      });
      // 监听ws打开状态
      uni.onSocketOpen((res) => {
        // console.log(123);
        console.log('连接成功');
        // 绑定发送id
        // ws链接状态
        setInterval(() => {
          console.log(111)
          uni.sendSocketMessage({
            data: JSON.stringify({
              type: `ping`,
            })
          });
        }, 1500);
        console.log('WebSocket连接已打开!');
      });
      
      let ta = this
      // ws监听接受消息
      uni.onSocketMessage((res) => {
        console.log(res.data)
        console.log(JSON.parse(res.data), 'aaaa');
        if (JSON.parse(res.data).type == 'chat') {
          that.data.push({
            ...JSON.parse(res.data)
          })
        }
      });
      uni.onSocketError((res) => {
        console.log('WebSocket连接打开失败,请检查!', res);
        uni.connectSocket({
          url: ''
        });
      });
      uni.onSocketClose((res) => {
        console.log('WebSocket 已关闭!');
        uni.connectSocket({
          url: ''
        });
      });
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>
<style lang="scss">
  /*每个页面公共css */
  @import "@/uni_modules/uview-ui/index.scss";
</style>

聊天列表页面的实现  可以根据自己的样式做调整

<template>
  <view>
    <div style="height: 30rpx"></div>
    <!-- 消息列表 -->
    <div class="big" v-for="(item,index) in data" :key="index" @click="goTalk(item.receive,item.img)">
      <div style="width: 10px"></div>
      <image :src="'http://wcy.jingyi.icu/'+item.img" mode="" class="Ai"></image>
      <div style="width: 10px"></div>
      <div class="contentOne">
        <div style="height: 10px"></div>
        <div class="Tow">
          <p class="text">{{item.name}}</p>
          <p>{{item.addtime}}</p>
        </div>
        <div style="height: 20rpx"></div>
        <div class="titleCon">{{item.content}}</div>
        <div style="height: 10rpx"></div>
      </div>
    </div>
    <u-tabbar :value="value" :placeholder="false" @change="change1" :fixed="true" :safeAreaInsetBottom="false">
      <u-tabbar-item text="首页" icon="home" @click="change"></u-tabbar-item>
      <u-tabbar-item text="消息" icon="chat" :badge="num" @click="change"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

聊天记录页面布局的实现

<template>
  <view class="chat">
    <scroll-view :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview" scroll-y="true"
      :scroll-top="scrollTop" class="scroll-view">
      <!-- 聊天主体 -->
      <view id="msglistview" class="chat-body">
        <!-- 聊天记录 -->
        <view v-for="(item,index) in data" :key="index">
          <!-- <view class="nows_time">
            <view class="am_pm_time">{{item.addtime}}</view>
          </view> -->
          <!-- 自己的内容 -->
          <view class="item self" v-if="item.sender == id">
            <!-- 文字内容 -->
            <view class="content right">
              {{item.content}}
            </view>
            <view class="avatar">
              <image :src="Himg" mode=""></image>
            </view>
          </view>
          <!-- 左侧内容 -->
          <view class="item Ai" v-if="item.sender != id">
            <view class="avatar">
              <image :src="Timg" mode=""></image>
            </view>
            <!-- 文字内容 -->
            <view class="content left">
              {{item.content}}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 防止聊天消息被发送框遮挡 -->
    <view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
      <view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
        <view class="uni-textarea">
          <textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
            :show-confirm-bar="false" @linechange="sendHeight" auto-height></textarea>
        </view>
        <button @tap="sends" class="send-btn">发送</button>
      </view>
    </view>
  </view>
</template>

 

相关文章
|
12天前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
12天前
|
开发框架 前端开发 开发者
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
【5月更文挑战第13天】Uniapp 的状态管理对于构建复杂跨平台应用至关重要,它包括全局变量、Vuex 风格管理。核心概念有 State、Actions 和 Mutations。通过状态定义、动作设计和突变管理,提高开发效率和代码可维护性。实际案例和与其他框架比较显示了 Uniapp 的优势。理解并有效利用状态管理,能提升应用质量和开发效率。
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
|
11天前
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
|
12天前
|
存储 开发框架 自然语言处理
【Uniapp 专栏】Uniapp 的多语言支持功能详解
【5月更文挑战第14天】Uniapp是一款跨平台开发框架,提供强大多语言支持,助力开发者轻松构建支持多种语言的应用,提升用户体验和市场拓展。其特点包括灵活的语言管理、跨平台一致性。通过语言文件存储内容,切换机制让用户自由切换。注重翻译准确性和文化适应性,集成到页面和组件中,同时关注性能优化。面对翻译不一致和更新及时性等问题,Uniapp将持续发展和完善,为全球化应用开发提供强有力支持。
【Uniapp 专栏】Uniapp 的多语言支持功能详解
|
12天前
|
存储 开发框架 安全
【Uniapp 专栏】探索 Uniapp 的本地存储功能特点
【5月更文挑战第14天】Uniapp的本地存储功能是其跨平台开发的强大优势,提供数据持久化的存储、读取,支持多种数据类型。其特点是简单易用、跨平台一致且有一定安全性。通过键值对存储和容量管理,适应不同应用场景,如用户登录信息存储和应用配置保存。同时,注意性能优化、数据清理和安全保护。与其他框架比较,Uniapp有独特优势,并将持续发展以满足复杂需求。开发者应根据业务需求设计存储策略,确保数据安全高效使用。
【Uniapp 专栏】探索 Uniapp 的本地存储功能特点
|
12天前
|
缓存 开发框架 安全
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
【5月更文挑战第13天】Uniapp是一款跨平台开发框架,提供便捷的网络请求功能,支持HTTP/HTTPS协议及GET/POST等多种请求方法。它允许设置请求参数、处理响应数据,并有超时时间、缓存策略及错误处理机制。还能与状态管理、页面交互结合,确保数据安全并进行性能优化。通过案例和比较,展现了Uniapp在网络请求上的优势,为开发高质量移动应用奠定基础。理解和掌握这些特性对于创建出色应用体验至关重要。
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
|
12天前
|
前端开发
t-io websocket的聊天功能学习记录(二)
t-io websocket的聊天功能学习记录(二)
12 0
|
12天前
t-io websocket的聊天功能学习记录(一)
t-io websocket的聊天功能学习记录(一)
15 0
|
12天前
|
资源调度 JavaScript 前端开发
❤Nodejs 第十五章(简单websocket聊天实现)
【4月更文挑战第15天】本文介绍了在Node.js中实现简单WebSocket聊天的过程。首先通过`yarn`创建项目并安装`ws`和`express`依赖。接着,编写`WebSocketServer.js`建立WebSocket服务器,处理客户端连接、消息收发及错误。然后,用`server.js`创建一个静态文件服务器,提供`index.html`。`index.html`包含客户端的WebSocket连接和消息处理。启动两个服务器后,可以在浏览器中打开`index.html`进行聊天。最后,讨论了在Node.js 20+Vite环境下使用WebSocket时可能遇到的问题
26 0
|
12天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
79 0

相关实验场景

更多