微信小程序开发聊天室——实时聊天,支持图片预览

第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种。第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?委屈不过我还是研究了一下,终于实现了。偷笑

首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等。点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标点符号可能会报错,比如我就是‘\’报的错,找了半天。

因为有人咨询,所以附上所有小程序代码,地址:https://github.com/chongwenwen/weixin_chat/tree/master

有人说为什么没有utile.js的代码,这个功能只用到websoket.js跟utile.js没有关系哦!还有后台代码在页面最底下

         

  

        

 

文档目录结构如下:(聊天页面为chat)

  

 

chat.wxml页面

      首先写好页面结构,既然是群聊功能,肯定有自己和别人,所以页面的view盒子应给有两部分,一个内容左侧显示,一个内容右侧显示,下面是代码,因为没有正式注册企业项目,我用的服务器都是本地的服务器,所以界面区分别人和我的聊天信息是用昵称区分的,如果正式项目应该是由一个用户标记去区分的

<view class="news" bindtap='outbtn'><view class="chat-notice" wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入群聊</view><view class="historycon"><scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}"><block wx:for="{{newslist}}" wx:key><!-- 历史消息 --><!-- <view class="chat-news"><view style="text-align: left;padding-left: 20rpx;"><image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image><text class="name">{{ item.nickName }}{{item.date}}</text></view><view class='you_left'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}"></image></block></view></view> --><view>{{item.date}}</view><!--自己的消息 --><view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}"><view style="text-align: right;padding-right: 20rpx;"><text class="name">{{ item.nickName }}</text><image class='new_img' src="{{userInfo.avatarUrl}}"></image></view><view class='my_right'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image></block></view></view><!-- 别人的消息 --><view class="chat-news" wx:else><view style="text-align: left;padding-left: 20rpx;"><image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image><text class="name">{{ item.nickName }}</text></view><view class='you_left'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image></block></view></view></block></scroll-view></view></view><view id="flag"></view><!-- 聊天输入 --><view class="message"><form bindreset="cleanInput" class="sendMessage"><input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input><view class="add" bindtap='increase'>+</view><button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button></form><view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}"><view class="image" bindtap='chooseImage'>相册 </view></view></view>

 

websoket.js文件

      在utils目录下,是封装了websoket的请求过程,以便在chat.js中调用。需要注意的是wx.connectSocket代表客户端首次和服务器建立联系,wx.onSocketOpen才是正式打开通道,wx.onSocketMessage必须在 wx.onSocketOpen 回调之后发送才生效。

wx.onSocketMessage里面带有参数是一个函数回调,这个回调就是后台服务器实时接收并返给前台的数据

var url = 'ws://........';//服务器地址function connect(user,func) {wx.connectSocket({url: url,header:{'content-type': 'application/json'},success: function () {console.log('信道连接成功~')},fail: function () {console.log('信道连接失败~')}})wx.onSocketOpen(function (res) {wx.showToast({title: '信道已开通~',icon: "success",duration: 2000})//接受服务器消息wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据});wx.onSocketError(function (res) {wx.showToast({title: '信道连接失败,请检查!',icon: "none",duration: 2000})})}//发送消息function send(msg) {wx.sendSocketMessage({data: msg});}module.exports = {connect: connect,send: send}

chat.js文件

聊天室的逻辑操作页面,websocket.connect(){}调用的是websocket.js封装好的websoket的逻辑函数,回调就是后台的数据,之所以在本页面调用就是方便接收以后的逻辑操作。我建立文件的时候用的就是微信官方的快速模板生成的,所以app.js里面没有变动,用户在chat.js获取userInfo的时候可以引用全局的app.globalData.userInfo

 

还有要注意的一点就是在选择发送图片的时候,必须是先把本地的图片地址发送给后台,转换成服务器的图片地址再次通过wensoket.send发送给服务器,这个时候服务器推送给其他用户的才是正确的地址,否则你的本地地址其他用户是访问不到的。

// pages/chat/chat.jsconst app = getApp()var websocket = require('../../utils/websocket.js');var utils = require('../../utils/util.js');Page({/*** 页面的初始数据*/data: {newslist:[],userInfo: {},scrollTop: 0,increase:false,//图片添加区域隐藏aniStyle: true,//动画效果message:"",previewImgList:[]},/*** 生命周期函数--监听页面加载*/onLoad: function () {var that = thisif (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo})}//调通接口websocket.connect(this.data.userInfo, function (res) {// console.log(JSON.parse(res.data))var list = []list = that.data.newslistlist.push(JSON.parse(res.data))that.setData({newslist: list})})},// 页面卸载onUnload(){wx.closeSocket();wx.showToast({title: '连接已断开~',icon: "none",duration: 2000})},//事件处理函数send: function () {var flag = thisif (this.data.message.trim() == ""){wx.showToast({title: '消息不能为空哦~',icon: "none",duration: 2000})}else {setTimeout(function(){flag.setData({increase: false})},500)websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl+'" }')this.bottom()}},//监听input值的改变bindChange(res) {this.setData({message : res.detail.value})},cleanInput(){//button会自动清空,所以不能再次清空而是应该给他设置目前的input值this.setData({message: this.data.message})},increase() {this.setData({increase: true,aniStyle: true})},//点击空白隐藏message下选框outbtn(){this.setData({increase: false,aniStyle: true})},//发送图片chooseImage() {var that = thiswx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths// console.log(tempFilePaths)wx.uploadFile({url: 'http://.....', //服务器地址filePath: tempFilePaths[0],name: 'file',headers: {'Content-Type': 'form-data'},success: function (res) {if (res.data){that.setData({increase: false})websocket.send('{"images":"'+ res.data +'","date":"'+utils.formatTime(new Date())+'","type":"image","nickName":"'+that.data.userInfo.nickName+'","avatarUrl":"'+that.data.userInfo.avatarUrl+'"}')that.bottom()}}})}})},//图片预览previewImg(e){var that = this//必须给对应的wxml的image标签设置data-set=“图片路径”,否则接收不到var res = e.target.dataset.srcvar list = this.data.previewImgList //页面的图片集合数组//判断res在数组中是否存在,不存在则push到数组中, -1表示res不存在if (list.indexOf(res) == -1 ) {this.data.previewImgList.push(res)}wx.previewImage({current: res, // 当前显示图片的http链接urls: that.data.previewImgList // 需要预览的图片http链接列表})},//聊天消息始终显示最底端bottom: function () {var query = wx.createSelectorQuery()query.select('#flag').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function (res) {wx.pageScrollTo({scrollTop: res[0].bottom // #the-id节点的下边界坐标})res[1].scrollTop // 显示区域的竖直滚动位置})},})

 

最后是页面的样式文件chat.wxss


 

/* pages/chat/chat.wxss */page {background-color: #f7f7f7;height: 100%;}/* 聊天内容 */.news {padding-top: 30rpx;text-align: center;/* height:100%; */box-sizing:border-box;}#flag{margin-bottom: 100rpx;height: 30rpx;}.chat-notice{text-align: center;font-size: 30rpx;padding: 10rpx 0;color: #666;}.historycon {height: 100%;width: 100%;/* flex-direction: column; */display: flex;border-top: 0px;}/* 聊天 */.chat-news{width: 100%;overflow: hidden;}.chat-news .my_right {float: right;/* right: 40rpx; */padding: 10rpx 10rpx;}.chat-news .name{margin-right: 10rpx;}.chat-news .you_left {float: left;/* left: 5rpx; */padding: 10rpx 10rpx;}.selectImg{display: inline-block;width: 150rpx;height: 150rpx;margin-left: 50rpx;}.my_right .selectImg{margin-right: 80rpx;}.new_img {width: 60rpx;height: 60rpx;border-radius: 50%;vertical-align: middle;margin-right: 10rpx;}.new_txt {max-width: 300rpx;display: inline-block;border-radius: 6rpx;line-height: 60rpx;background-color: #95d4ff;padding: 5rpx 20rpx;margin: 0 10rpx;margin-left: 50rpx;}.my_right .new_txt{margin-right:60rpx;}.you{background-color: lightgreen;}.my {border-color: transparent transparent transparent #95d4ff;}.you {border-color: transparent #95d4ff transparent transparent;}.hei{margin-top: 50px;height: 20rpx;}.history {height: 100%;margin-top: 15px;padding: 10rpx;font-size: 14px;line-height: 40px;word-break: break-all;}::-webkit-scrollbar {width: 0;height: 0;color: transparent;z-index: -1;}/* 信息输入区域 */.message{position: fixed;bottom:0;width: 100%;}.sendMessage{display: block;height: 80rpx;padding: 10rpx 10rpx;background-color: #fff;border-top: 2rpx solid #eee;border-bottom: 2rpx solid #eee;z-index:3;}.sendMessage input{float:left;width: 66%;height: 100%;line-height: 80rpx;border-bottom: 1rpx solid #ccc;padding:0 10rpx;font-size: 35rpx;color: #666;}.sendMessage view{display: inline-block;width: 80rpx;height: 80rpx;line-height: 80rpx;font-size: 60rpx;text-align: center;color: #999;border: 1rpx solid #ccc;border-radius: 50%;margin-left: 10rpx;}.sendMessage button {float: right;font-size: 35rpx;}.increased{width:100%;/* height: 150rpx; */padding: 40rpx 30rpx;background-color: #fff;}.increased .image{width: 100rpx;height: 100rpx;border: 3rpx solid #ccc;line-height: 100rpx;text-align: center;border-radius: 8rpx;font-size:35rpx;}@keyframes slidedown {from {transform: translateY(0);}to {transform: translateY(100%);}}.slidedown {animation: slidedown 0.5s linear ;}.slideup {animation: slideup 0.5s linear ;}@keyframes slideup {from {transform: translateY(100%);}to {transform: translateY(0);}}

后台代码(图片):

后台代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/4502.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信聊天小程序——(四、聊天页面)

四、聊天页面 步骤一、聊天页面的搭建 效果图&#xff1a; 思路&#xff1a; 聊天页面的搭建 首先在聊天页面获取我们所有的好友信息其次当点击我们对应好友&#xff0c;进入聊天页面 注意传递我们此时的聊天记录表id&#xff0c;方便之后进行添加聊天记录聊天页面下方布局发…

在微信小程序中如何支持使用流模式(stream),打造ChatGPT实时回复机器人,最详细讲解。

有开发过ChatGPT相关应用的都知道&#xff0c;小程序是不支持流式请求的&#xff0c;目前市面上大多数开发者的解决方案都是使用websocket来解决。 还有一部分开发者是小程序嵌套网页解决这个问题&#xff0c;前者对于我们软件销售型的团队来说&#xff0c;交付会很麻烦&#…

chatgpt写微信小程序

作为微信小程序开发者&#xff0c;您的任务是使用微信小程序原生开发&#xff0c;编写一个计数器页面&#xff0c;请回复满足以下要求的代码: 创建一个包含wxml、js、wxss和json文件的微信小程序页面&#xff0c;并在其中实现一个计数器页面。视图中显示的文本应为中文。请注意…

基于ChatGPT的智能问答、ai绘图微信小程序思路

ChatGPT ![在这里插入图片描述](https://img-blog.csdnimg.cn/186d9ecc453b48be9f19c467da7c3f07.jpeg ChatGPT是openai公司的一个人工智能机器人产品&#xff0c;目前已经升级到4.0版本。其因便捷高效&#xff0c;已经在大学生、IT届、科研界等领域广为流传。但是直接进入其…

微信小程序ChatGpt流式响应

最近用微信小程序做chatGpt的Ai对话&#xff0c;其中重要的一点就是流式响应&#xff0c;现在分享处理逻辑&#xff0c;先给演示图。 下面是关键代码实现逻辑 const that this;const requestTask wx.request({url: xxxxx,responseType: "arraybuffer",method: POST…

微信小程序_把chatgpt聊天数据复制到剪切板

文章目录 ⭐ 前言⭐ 开始网格背景样式配置对话框样式配置复制到剪切板 ⭐ 结束 ⭐ 前言 大家好&#xff0c;我是yma16&#xff0c;不止前端&#xff0c;本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据。 往期微信小程序文章 小程序自定义微信昵称和头像 小程序制作…

KeepChatGPT:让ChatGPT畅聊无阻的浏览器插件

ChatGPT是一款强大的自然语言处理模型&#xff0c;但在使用过程中经常出现网络报错、刷新网页等问题&#xff0c;让使用体验大打折扣。而今天介绍的KeepChatGPT浏览器插件则能够有效解决这些问题&#xff0c;让ChatGPT畅聊无阻&#xff01; KeepChatGPT是一款解决ChatGPT畅聊过…

浏览器插件的使用

善于使用浏览器插件&#xff0c;能起到高效上网的作用。 Microsoft Edge 是全球广受欢迎的浏览器&#xff0c;浏览器本身具有快速、简单和轻量级的特点。一流的性能系统和访问速度极大提升您的浏览体验。 对于浏览器的用户来说&#xff0c;安装一些实用的插件&#xff0c;能让…

CHATGPT精选插件

CHATGPT是帮你做事&#xff0c;而不是替你做事 1、联网插件&#xff1a; 使用Webpilot插件联网时还可以同时使用其它两种插件&#xff08;一次可以同时使用三个插件&#xff09;&#xff0c;而使用Web Browsing插件功能联网时无法使用插件功能&#xff08;联网功能和插件只能…

这款工具被网友玩疯了!我又玩物丧志了...

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住&#xff0c;它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏&#xff1a;先用ChatG…

OpenAI发布ChatGPT!手把手debug代码!

卷友们好&#xff0c;我是rumor。 已经好久没看OpenAI的官网[1]了&#xff0c;但今天冥冥之中感觉受到了什么召唤&#xff0c;心想GPT4什么时候发布&#xff0c;莫名地就打开了&#xff0c;果然有料&#xff1a; 试用&#xff1a;https://chat.openai.com/ 它把魔抓又伸向对话了…

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析 前言 配置好ChatGPT的几个小时之后&#xff0c;我发现了一个宝藏网页https://github.com/f/awesome-chatgpt-prompts&#xff0c;也是我这篇文章的灵感所在&#xff0c;github里面给出让chatgpt扮演…

GPT-3/ChatGPT 复现的经验教训

为什么所有公开的对 GPT-3 的复现都失败了&#xff1f;我们应该在哪些任务上使用 GPT-3.5 或 ChatGPT&#xff1f; 对于那些想要复现一个属于自己的 GPT-3 或 ChatGPT 的人而言&#xff0c;第一个问题是关键的。第二个问题则对那些想要使用它们的人是重要的&#xff08;下文提…

Day921.chatGPT

chatGPT Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于chatGPT的内容。 一、什么是chatGPT ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;ChatGPT 是一种基于 GPT (Generative Pre-trained Transformer)…

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版 1. 指南1-1. 提示的指南1-2. 配置1-3. 提示语原则原则 1: 写出清晰而具体的指示技巧 1: 使用分隔符来清楚地表明输入的不同部分技巧 2: 要求提供结构化的输出技巧 3: 要求模型检查条件是否得到满足技巧 4: "少许样本…

ChatGPT支持第三方plugins,并且推出了网络浏览器和代码解释器两个插件

2023年3月23日&#xff0c;OpenAI实现了对ChatGPT插件的初步支持&#xff0c;还推出了两个插件&#xff0c;一个网络浏览器和代码解释器&#xff0c;并且开源了知识库检索插件的代码&#xff0c;任何有信息的开发者都可以自行托管&#xff0c;以增强ChatGPT的功能。 在目前已实…

06-发送短信验证码实现登录功能

1、发送短信验证码实现登录功能的流程 1.1、获取验证码流程 1.2、登录流程 1.3、页面带有图形验证码的流程 2、 注册登录二合一页面的开发 2.1、将src目录下的App.vue页面上通用显示的删掉 2.2、在router目录下的index.js文件中通过懒加载的方式添加login.vue页面 对于rout…

手把手教你使用短信验证码接口

因为闪速码短信平台可以免费赠送200条使用&#xff0c;所以本文档以闪速码为列讲解。 一、账号注册、登录 一、注册、登录闪速码&#xff08;www.shansuma.com&#xff09;&#xff0c;进行实名认证。实名认证分为个人认证和企业认证&#xff0c;值得注意的是&#xff1a;个人…

最好用的发短信(验证码、语音短信)接口

使用阿里大鱼短信接口 注册 进入大鱼页面&#xff0c;如果没有账号&#xff0c;则自行注册&#xff0c;再此不在过多详述。注册完成或者有账号的则在首页中点击加入“加入阿里大鱼”&#xff0c;如下&#xff1a; 创建引用 点击“管理中心”&#xff0c;然后再点击右上角…

短信接口调用-手机短信,验证码

本文章短信平台接口基于中国网建SMS短信平台API&#xff0c;相关网址为点我打开--->中国网建SMS短信平台。注册后即可立即使用&#xff0c;无信息审核验证延迟。 通过中国网建第三方API发送一条短信&#xff0c;需要知道以下信息&#xff1a;用户注册时的Uid&#xff1a;用户…