经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
详解微信小程序开发聊天室—实时聊天，支持图片预览
来源：jb51　　时间：2019/5/20 10:50:02　　对本文有异议

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

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

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

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

         

        

文档目录结构如下：（聊天页面为chat）

  

chat.wxml页面

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

  1. <view class="news" bindtap='outbtn'>
  2.  
  3. <view class="chat-notice" wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入群聊</view>
  4.  
  5. <view class="historycon">
  6.  
  7. <scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}">
  8.  
  9. <block wx:for="{{newslist}}" wx:key>
  10.  
  11.     <!-- 历史消息 -->
  12.  
  13. <!-- <view class="chat-news">
  14. <view style="text-align: left;padding-left: 20rpx;">
  15. <image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
  16. <text class="name">{{ item.nickName }}{{item.date}}</text>
  17. </view>
  18. <view class='you_left'>
  19. <block wx:if="{{item.type=='text'}}">
  20. <view class='new_txt'>{{item.content}}</view>
  21. </block>
  22. <block wx:if="{{item.type=='image'}}">
  23. <image class="selectImg" src="{{item.images}}"></image>
  24. </block>
  25. </view>
  26. </view> -->
  27.  
  28. <view>{{item.date}}</view>
  29.  
  30. <!--自己的消息 -->
  31.  
  32. <view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}">
  33.  
  34. <view style="text-align: right;padding-right: 20rpx;">
  35.  
  36. <text class="name">{{ item.nickName }}</text>
  37.  
  38. <image class='new_img' src="{{userInfo.avatarUrl}}"></image>
  39.  
  40. </view>
  41.  
  42. <view class='my_right'>
  43.  
  44. <block wx:if="{{item.type=='text'}}">
  45.  
  46. <view class='new_txt'>{{item.content}}</view>
  47.  
  48. </block>
  49.  
  50. <block wx:if="{{item.type=='image'}}">
  51.  
  52. <image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
  53.  
  54. </block>
  55.  
  56. </view>
  57.  
  58. </view>
  59.  
  60. <!-- 别人的消息 -->
  61.  
  62. <view class="chat-news" wx:else>
  63.  
  64. <view style="text-align: left;padding-left: 20rpx;">
  65.  
  66. <image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
  67.  
  68. <text class="name">{{ item.nickName }}</text>
  69.  
  70. </view>
  71.  
  72. <view class='you_left'>
  73.  
  74. <block wx:if="{{item.type=='text'}}">
  75.  
  76. <view class='new_txt'>{{item.content}}</view>
  77.  
  78. </block>
  79.  
  80. <block wx:if="{{item.type=='image'}}">
  81.  
  82. <image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
  83.  
  84. </block>
  85.  
  86. </view>
  87.  
  88. </view>
  89.  
  90. </block>
  91.  
  92. </scroll-view>
  93.  
  94. </view>
  95.  
  96. </view>
  97.  
  98. <view id="flag"></view>
  99.  
  100. <!-- 聊天输入 -->
  101.  
  102. <view class="message">
  103.  
  104. <form bindreset="cleanInput" class="sendMessage">
  105.  
  106. <input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input>
  107.  
  108. <view class="add" bindtap='increase'>+</view>
  109.  
  110. <button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button>
  111.  
  112. </form>
  113.  
  114. <view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">
  115.  
  116. <view class="image" bindtap='chooseImage'>相册 </view>
  117.  
  118. </view>
  119.  
  120. </view>

websoket.js文件

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

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

  1. var url = 'ws://........';//服务器地址
  2.  
  3.  
  4.  
  5. function connect(user,func) {
  6.  
  7. wx.connectSocket({
  8.  
  9. url: url,
  10.  
  11. header:{'content-type': 'application/json'},
  12.  
  13. success: function () {
  14.  
  15. console.log('信道连接成功~')
  16.  
  17. },
  18.  
  19. fail: function () {
  20.  
  21. console.log('信道连接失败~')
  22.  
  23. }
  24.  
  25. })
  26.  
  27. wx.onSocketOpen(function (res) {
  28.  
  29. wx.showToast({
  30.  
  31. title: '信道已开通~',
  32.  
  33. icon: "success",
  34.  
  35. duration: 2000
  36.  
  37. })
  38.  
  39. //接受服务器消息
  40.  
  41. wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据
  42.  
  43. });
  44.  
  45. wx.onSocketError(function (res) {
  46.  
  47. wx.showToast({
  48.  
  49. title: '信道连接失败，请检查！',
  50.  
  51. icon: "none",
  52.  
  53. duration: 2000
  54.  
  55. })
  56.  
  57. })
  58.  
  59. }
  60.  
  61. //发送消息
  62.  
  63. function send(msg) {
  64.  
  65. wx.sendSocketMessage({
  66.  
  67. data: msg
  68.  
  69. });
  70.  
  71. }
  72.  
  73. module.exports = {
  74.  
  75. connect: connect,
  76.  
  77. send: send
  78.  
  79. }

chat.js文件

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

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

  1. // pages/chat/chat.js
  2.  
  3. const app = getApp()
  4.  
  5. var websocket = require('../../utils/websocket.js');
  6.  
  7. var utils = require('../../utils/util.js');
  8.  
  9. Page({
  10.  
  11.  
  12.  
  13. /**
  14. * 页面的初始数据
  15. */
  16.  
  17. data: {
  18.  
  19. newslist:[],
  20.  
  21. userInfo: {},
  22.  
  23. scrollTop: 0,
  24.  
  25. increase:false,//图片添加区域隐藏
  26.  
  27. aniStyle: true,//动画效果
  28.  
  29. message:"",
  30.  
  31. previewImgList:[]
  32.  
  33. },
  34.  
  35. /**
  36. * 生命周期函数--监听页面加载
  37. */
  38.  
  39. onLoad: function () {
  40.  
  41. var that = this
  42.  
  43. if (app.globalData.userInfo) {
  44.  
  45. this.setData({
  46.  
  47. userInfo: app.globalData.userInfo
  48.  
  49. })
  50.  
  51. }
  52.  
  53. //调通接口
  54.  
  55. websocket.connect(this.data.userInfo, function (res) {
  56.  
  57. // console.log(JSON.parse(res.data))
  58.  
  59. var list = []
  60.  
  61. list = that.data.newslist
  62.  
  63. list.push(JSON.parse(res.data))
  64.  
  65. that.setData({
  66.  
  67. newslist: list
  68.  
  69. })
  70.  
  71. })
  72.  
  73. },
  74.  
  75. // 页面卸载
  76.  
  77. onUnload(){
  78.  
  79. wx.closeSocket();
  80.  
  81. wx.showToast({
  82.  
  83. title: '连接已断开~',
  84.  
  85. icon: "none",
  86.  
  87. duration: 2000
  88.  
  89. })
  90.  
  91. },
  92.  
  93. //事件处理函数
  94.  
  95. send: function () {
  96.  
  97. var flag = this
  98.  
  99. if (this.data.message.trim() == ""){
  100.  
  101. wx.showToast({
  102.  
  103. title: '消息不能为空哦~',
  104.  
  105. icon: "none",
  106.  
  107. duration: 2000
  108.  
  109. })
  110.  
  111. }else {
  112.  
  113. setTimeout(function(){
  114.  
  115. flag.setData({
  116.  
  117. increase: false
  118.  
  119. })
  120.  
  121. },500)
  122.  
  123. websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl+'" }')
  124.  
  125. this.bottom()
  126.  
  127. }
  128.  
  129. },
  130.  
  131. //监听input值的改变
  132.  
  133. bindChange(res) {
  134.  
  135. this.setData({
  136.  
  137. message : res.detail.value
  138.  
  139. })
  140.  
  141. },
  142.  
  143. cleanInput(){
  144.  
  145. //button会自动清空，所以不能再次清空而是应该给他设置目前的input值
  146.  
  147. this.setData({
  148.  
  149. message: this.data.message
  150.  
  151. })
  152.  
  153. },
  154.  
  155. increase() {
  156.  
  157. this.setData({
  158.  
  159. increase: true,
  160.  
  161. aniStyle: true
  162.  
  163. })
  164.  
  165. },
  166.  
  167. //点击空白隐藏message下选框
  168.  
  169. outbtn(){
  170.  
  171. this.setData({
  172.  
  173. increase: false,
  174.  
  175. aniStyle: true
  176.  
  177. })
  178.  
  179. },
  180.  
  181. //发送图片
  182.  
  183. chooseImage() {
  184.  
  185. var that = this
  186.  
  187. wx.chooseImage({
  188.  
  189. count: 1, // 默认9
  190.  
  191. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  192.  
  193. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  194.  
  195. success: function (res) {
  196.  
  197. // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  198.  
  199. var tempFilePaths = res.tempFilePaths
  200.  
  201. // console.log(tempFilePaths)
  202.  
  203. wx.uploadFile({
  204.  
  205. url: 'http://.....', //服务器地址
  206.  
  207. filePath: tempFilePaths[0],
  208.  
  209. name: 'file',
  210.  
  211. headers: {
  212.  
  213. 'Content-Type': 'form-data'
  214.  
  215. },
  216.  
  217. success: function (res) {
  218.  
  219. if (res.data){
  220.  
  221. that.setData({
  222.  
  223. increase: false
  224.  
  225. })
  226.  
  227. websocket.send('{"images":"'+ res.data +'","date":"'+utils.formatTime(new Date())+'","type":"image","nickName":"'+that.data.userInfo.nickName+'","avatarUrl":"'+that.data.userInfo.avatarUrl+'"}')
  228.  
  229. that.bottom()
  230.  
  231. }
  232.  
  233. }
  234.  
  235. })
  236.  
  237. }
  238.  
  239. })
  240.  
  241. },
  242.  
  243. //图片预览
  244.  
  245. previewImg(e){
  246.  
  247. var that = this
  248.  
  249. //必须给对应的wxml的image标签设置data-set=“图片路径”，否则接收不到
  250.  
  251. var res = e.target.dataset.src
  252.  
  253. var list = this.data.previewImgList //页面的图片集合数组
  254.  
  255. //判断res在数组中是否存在，不存在则push到数组中, -1表示res不存在
  256.  
  257. if (list.indexOf(res) == -1 ) {
  258.  
  259. this.data.previewImgList.push(res)
  260.  
  261. }
  262.  
  263. wx.previewImage({
  264.  
  265. current: res, // 当前显示图片的http链接
  266.  
  267. urls: that.data.previewImgList // 需要预览的图片http链接列表
  268.  
  269. })
  270.  
  271. },
  272.  
  273. //聊天消息始终显示最底端
  274.  
  275. bottom: function () {
  276.  
  277. var query = wx.createSelectorQuery()
  278.  
  279. query.select('#flag').boundingClientRect()
  280.  
  281. query.selectViewport().scrollOffset()
  282.  
  283. query.exec(function (res) {
  284.  
  285. wx.pageScrollTo({
  286.  
  287. scrollTop: res[0].bottom // #the-id节点的下边界坐标
  288.  
  289. })
  290.  
  291. res[1].scrollTop // 显示区域的竖直滚动位置
  292.  
  293. })
  294.  
  295. },
  296.  
  297. })

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

  1. /* pages/chat/chat.wxss */
  2.  
  3. page {
  4.  
  5. background-color: #f7f7f7;
  6.  
  7. height: 100%;
  8.  
  9. }
  10.  
  11. /* 聊天内容 */
  12.  
  13. .news {
  14.  
  15. padding-top: 30rpx;
  16.  
  17. text-align: center;
  18.  
  19. /* height:100%; */
  20.  
  21. box-sizing:border-box;
  22.  
  23. }
  24.  
  25. #flag{
  26.  
  27. margin-bottom: 100rpx;
  28.  
  29. height: 30rpx;
  30.  
  31. }
  32.  
  33. .chat-notice{
  34.  
  35. text-align: center;
  36.  
  37. font-size: 30rpx;
  38.  
  39. padding: 10rpx 0;
  40.  
  41. color: #666;
  42.  
  43. }
  44.  
  45. .historycon {
  46.  
  47. height: 100%;
  48.  
  49. width: 100%;
  50.  
  51. /* flex-direction: column; */
  52.  
  53. display: flex;
  54.  
  55. border-top: 0px;
  56.  
  57. }
  58.  
  59. /* 聊天 */
  60.  
  61. .chat-news{
  62.  
  63. width: 100%;
  64.  
  65. overflow: hidden;
  66.  
  67. }
  68.  
  69. .chat-news .my_right {
  70.  
  71. float: right;
  72.  
  73. /* right: 40rpx; */
  74.  
  75. padding: 10rpx 10rpx;
  76.  
  77. }
  78.  
  79. .chat-news .name{
  80.  
  81. margin-right: 10rpx;
  82.  
  83. }
  84.  
  85. .chat-news .you_left {
  86.  
  87. float: left;
  88.  
  89. /* left: 5rpx; */
  90.  
  91. padding: 10rpx 10rpx;
  92.  
  93. }
  94.  
  95. .selectImg{
  96.  
  97. display: inline-block;
  98.  
  99. width: 150rpx;
  100.  
  101. height: 150rpx;
  102.  
  103. margin-left: 50rpx;
  104.  
  105. }
  106.  
  107. .my_right .selectImg{
  108.  
  109. margin-right: 80rpx;
  110.  
  111. }
  112.  
  113. .new_img {
  114.  
  115. width: 60rpx;
  116.  
  117. height: 60rpx;
  118.  
  119. border-radius: 50%;
  120.  
  121. vertical-align: middle;
  122.  
  123. margin-right: 10rpx;
  124.  
  125. }
  126.  
  127. .new_txt {
  128.  
  129. max-width: 300rpx;
  130.  
  131. display: inline-block;
  132.  
  133. border-radius: 6rpx;
  134.  
  135. line-height: 60rpx;
  136.  
  137. background-color: #95d4ff;
  138.  
  139. padding: 5rpx 20rpx;
  140.  
  141. margin: 0 10rpx;
  142.  
  143. margin-left: 50rpx;
  144.  
  145. }
  146.  
  147. .my_right .new_txt{
  148.  
  149. margin-right:60rpx;
  150.  
  151. }
  152.  
  153. .you{
  154.  
  155. background-color: lightgreen;
  156.  
  157. }
  158.  
  159. .my {
  160.  
  161. border-color: transparent transparent transparent #95d4ff;
  162.  
  163. }
  164.  
  165. .you {
  166.  
  167. border-color: transparent #95d4ff transparent transparent;
  168.  
  169. }
  170.  
  171. .hei{
  172.  
  173. margin-top: 50px;
  174.  
  175. height: 20rpx;
  176.  
  177. }
  178.  
  179. .history {
  180.  
  181. height: 100%;
  182.  
  183. margin-top: 15px;
  184.  
  185. padding: 10rpx;
  186.  
  187. font-size: 14px;
  188.  
  189. line-height: 40px;
  190.  
  191. word-break: break-all;
  192.  
  193. }
  194.  
  195. ::-webkit-scrollbar {
  196.  
  197. width: 0;
  198.  
  199. height: 0;
  200.  
  201. color: transparent;
  202.  
  203. z-index: -1;
  204.  
  205. }
  206.  
  207.  
  208.  
  209. /* 信息输入区域 */
  210.  
  211. .message{
  212.  
  213. position: fixed;
  214.  
  215. bottom:0;
  216.  
  217. width: 100%;
  218.  
  219. }
  220.  
  221. .sendMessage{
  222.  
  223. display: block;
  224.  
  225. height: 80rpx;
  226.  
  227. padding: 10rpx 10rpx;
  228.  
  229. background-color: #fff;
  230.  
  231. border-top: 2rpx solid #eee;
  232.  
  233. border-bottom: 2rpx solid #eee;
  234.  
  235. z-index:3;
  236.  
  237. }
  238.  
  239. .sendMessage input{
  240.  
  241. float:left;
  242.  
  243. width: 66%;
  244.  
  245. height: 100%;
  246.  
  247. line-height: 80rpx;
  248.  
  249. border-bottom: 1rpx solid #ccc;
  250.  
  251. padding:0 10rpx;
  252.  
  253. font-size: 35rpx;
  254.  
  255. color: #666;
  256.  
  257. }
  258.  
  259. .sendMessage view{
  260.  
  261. display: inline-block;
  262.  
  263. width: 80rpx;
  264.  
  265. height: 80rpx;
  266.  
  267. line-height: 80rpx;
  268.  
  269. font-size: 60rpx;
  270.  
  271. text-align: center;
  272.  
  273. color: #999;
  274.  
  275. border: 1rpx solid #ccc;
  276.  
  277. border-radius: 50%;
  278.  
  279. margin-left: 10rpx;
  280.  
  281. }
  282.  
  283. .sendMessage button {
  284.  
  285. float: right;
  286.  
  287. font-size: 35rpx;
  288.  
  289. }
  290.  
  291. .increased{
  292.  
  293. width:100%;
  294.  
  295. /* height: 150rpx; */
  296.  
  297. padding: 40rpx 30rpx;
  298.  
  299. background-color: #fff;
  300.  
  301. }
  302.  
  303. .increased .image{
  304.  
  305. width: 100rpx;
  306.  
  307. height: 100rpx;
  308.  
  309. border: 3rpx solid #ccc;
  310.  
  311. line-height: 100rpx;
  312.  
  313. text-align: center;
  314.  
  315. border-radius: 8rpx;
  316.  
  317. font-size:35rpx;
  318.  
  319. }
  320.  
  321. @keyframes slidedown {
  322.  
  323. from {
  324.  
  325. transform: translateY(0);
  326.  
  327. }
  328.  
  329. to {
  330.  
  331. transform: translateY(100%);
  332.  
  333. }
  334.  
  335. }
  336.  
  337. .slidedown {
  338.  
  339. animation: slidedown 0.5s linear ;
  340.  
  341. }
  342.  
  343. .slideup {
  344.  
  345. animation: slideup 0.5s linear ;
  346.  
  347. }
  348.  
  349. @keyframes slideup {
  350.  
  351. from {
  352.  
  353. transform: translateY(100%);
  354.  
  355. }
  356.  
  357. to {
  358.  
  359. transform: translateY(0);
  360.  
  361. }
  362.  
  363. }

后台代码（图片）：

以上所述是小编给大家介绍的微信小程序实时聊天支持图片预览详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号