微信小程序WebSocket实现聊天对话功能

本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码,供大家参考,具体内容如下

js

var app = getApp();
var socketOpen = false;
var frameBuffer_Data, session, SocketTask;
var url = 'ws://请填写您的长链接接口地址';
var upload_url ='请填写您的图片上传接口地址'
Page({
 data: {
  user_input_text: '',//用户输入文字
  inputValue: '',
  returnValue: '',
  addImg: false,
  //格式示例数据,可为空
  allContentList: [],
  num: 0
 },
 // 页面加载
 onLoad: function () {
  this.bottom();
 },
 onShow: function (e) {
  if (!socketOpen) {
   this.webSocket()
  }
 },
 // 页面加载完成
 onReady: function () {
  var that = this;
  SocketTask.onOpen(res => {
   socketOpen = true;
   console.log('监听 WebSocket 连接打开事件。', res)
  })
  SocketTask.onClose(onClose => {
   console.log('监听 WebSocket 连接关闭事件。', onClose)
   socketOpen = false;
   this.webSocket()
  })
  SocketTask.onError(onError => {
   console.log('监听 WebSocket 错误。错误信息', onError)
   socketOpen = false
  })
  SocketTask.onMessage(onMessage => {
   console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
   var onMessage_data = JSON.parse(onMessage.data)
   if (onMessage_data.cmd == 1) {
    that.setData({
     link_list: text
    })
    console.log(text, text instanceof Array)
    // 是否为数组
    if (text instanceof Array) {
     for (var i = 0; i < text.length; i++) {
      text[i]
     }
    } else {

    }
    that.data.allContentList.push({ is_ai: true, text: onMessage_data.body });
    that.setData({
     allContentList: that.data.allContentList
    })
    that.bottom()
   }
  })
 },
 webSocket: function () {
  // 创建Socket
  SocketTask = wx.connectSocket({
   url: url,
   data: 'data',
   header: {
    'content-type': 'application/json'
   },
   method: 'post',
   success: function (res) {
    console.log('WebSocket连接创建', res)
   },
   fail: function (err) {
    wx.showToast({
     title: '网络异常!',
    })
    console.log(err)
   },
  })
 },

 // 提交文字
 submitTo: function (e) {
  let that = this;
  var data = {
   body: that.data.inputValue,
  }

  if (socketOpen) {
   // 如果打开了socket就发送数据给服务器
   sendSocketMessage(data)
   this.data.allContentList.push({ is_my: { text: this.data.inputValue }});
   this.setData({
    allContentList: this.data.allContentList,
    inputValue: ''
   })

   that.bottom()
  }
 },
 bindKeyInput: function (e) {
  this.setData({
   inputValue: e.detail.value
  })
 },

 onHide: function () {
  SocketTask.close(function (close) {
   console.log('关闭 WebSocket 连接。', close)
  })
 },
 upimg: function () {
  var that = this;
   wx.chooseImage({
    sizeType: ['original', 'compressed'],
    success: function (res) {
     that.setData({
      img: res.tempFilePaths
     })
     wx.uploadFile({
      url: upload_url,
      filePath: res.tempFilePaths,
      name: 'img',
      success: function (res) {
       console.log(res)
        wx.showToast({
         title: '图片发送成功!',
         duration: 3000
        });
      }
     })
     that.data.allContentList.push({ is_my: { img: res.tempFilePaths } });
     that.setData({
      allContentList: that.data.allContentList,
     })
     that.bottom();
    }
   })
 },
 addImg: function () {
  this.setData({
   addImg: !this.data.addImg
  })

 },
 // 获取hei的id节点然后屏幕焦点调转到这个节点
 bottom: function () {
  var that = this;
  this.setData({
   scrollTop: 1000000
  })
 },
})

//通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(msg) {
 var that = this;
 console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
 SocketTask.send({
  data: JSON.stringify(msg)
 }, function (res) {
  console.log('已发送', res)
 })
} 

wxml

<view class='page_bg' wx:if='{{block}}' bindtap='hide_bg' />
<view class='btn_bg' wx:if='{{block}}'>
 <view wx:for="{{link_list}}" wx:key='index'>
  <button class="sp_tit" id='{{index}}' bindtap='list_item'>查看详情 {{item}} </button>
 </view>
</view>
<scroll-view class="history" scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">

 <block wx:key="{{index}}" wx:for="{{allContentList}}">
  <!-- <view>
   <text class='time'>{{time}}</text>
  </view> -->
  <view class='my_right' wx:if="{{item.is_my}}">
   <view class='p_r' wx:if='{{item.is_my.text}}'>
    <text class='new_txt'><text class='new_txt_my'>{{item.is_my.text}}</text></text>
    <view class='sanjiao my'></view>
    <image class='new_img' src='/images/test.jpg'></image>
   </view>
   <view class='p_r' wx:if='{{item.is_my.img}}' bindtap='my_audio_click' data-id='{{index}}'>
    <text class='new_txt'> </text>
    <view class='my_img_bg'>
    <image class='my_audio' src='{{img}}'></image></view>
    <view class='sanjiao my'></view>
    <image class='new_img' src='/images/test.jpg'></image>
   </view>
  </view>
  <!-- <view class='you_left' id='id_{{allContentList.length}}'> -->
  <view class='you_left' id='id_{{allContentList.length}}' wx:key="{{index}}" wx:if="{{item.is_ai}}">
   <view class='p_r'>
    <image class='new_img' src='/images/chac.jpg'></image>
    <view class='sanjiao you'></view>
    <view class='new_txt'>
     <view class='new_txt_ai'>
      <!-- {{item.text}} -->
      <block wx:for='{{item.is_two}}' wx:key='index'>
       <text wx:if='{{item.text}}'>{{item.text}}</text>
       <text wx:if='{{item.a.title}}' style='color:#0000EE' bindtap='link' id='{{item.a.link}}'>{{item.a.title}}</text>
      </block>
     </view>
    </view>
   </view>
  </view>
 </block>
</scroll-view>
<view class="sendmessage">
 <image class='voice_icon' bindtap='addImg' src='/images/jia_img.png'></image>
 <block wx:if='{{!addImg}}'>
  <input type="text" bindinput="bindKeyInput" value='{{inputValue}}' focus='{{focus}}' bindfocus="focus" confirm-type="done" placeholder="" />
  <button bindtap="submitTo" class='user_input_text'>发送</button>
 </block>
 <block wx:if='{{addImg}}'>
  <view class='voice_ing' bindtap="upimg">发送图片</view>
 </block>
</view>

css

page {
 background-color: #f2f2f2;
 height: 100%;
}
.jia_img{
 height: 80rpx;
 width: 90rpx;
}
.time {
 text-align: center;
 padding: 5rpx 20rpx 5rpx 20rpx;
 width: 200rpx;
 font-size: 26rpx;
 background-color: #E8E8E8;
}
.tab{
 bottom: 120rpx;
}
.tab_1{
 position: fixed;
 bottom: 50rpx;
 width: 200rpx;
 font-size: 26rpx;
 left: 50%;
 margin-left: -45rpx;
 height: 100rpx;
}
.tab_2{
 right: 30rpx;
 position: fixed;
}
/* 聊天 */ 

.my_right {
 float: right;
 margin-top: 30rpx;
 position: relative;
 right: 40rpx;
}
.my_audio{
 height: 120rpx;
 width: 150rpx;
 position: absolute;
 right: 150rpx;
 background: white;
 top: 20rpx;
}
.my_img_bg{
 height: 150rpx;
 width: 400rpx;
 position: relative;
 right: 0;
 background: white;
 top: 20rpx;
}
.you_left {
 margin-top: 30rpx;
 float: left;
 position: relative;
 left: 5rpx;
} 

.new_img {
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
} 

.new_txt {
 width: 420rpx;
}
.new_txt_my{
 border-radius: 7px;
 background-color: #fff;
 margin-top: 10rpx;
 padding: 0rpx 30rpx 0rpx 30rpx;
 float: right;
}
.new_txt_ai{
 border-radius: 7px;
 background-color: #fff;
 margin-top: 10rpx;
 padding: 0rpx 30rpx 0rpx 30rpx;
 float: left;
}
.sanjiao {
 top: 25rpx;
 position: relative;
 width: 0px;
 height: 0px;
 border-width: 15rpx;
 border-style: solid;
} 

.my {
 border-color: transparent transparent transparent #fff;
} 

.you {
 border-color: transparent #fff transparent transparent;
} 

.sendmessage {
 width: 100%;
 z-index: 2;
 display: flex;
 position: fixed;
 bottom: 0px;
 background-color: #F4F4F6;
 flex-direction: row;
 height: 85rpx;
}
.voice_icon{
 width: 60rpx;
 height: 60rpx;
 margin: 0 auto;
 padding: 10rpx 10rpx 10rpx 10rpx;
}
.voice_ing{
 width: 90%;
 height: 75rpx;
 line-height: 85rpx;
 text-align: center;
 border-radius: 15rpx;
 border: 1px solid #d0d0d0;
}
.sendmessage_2 {
 z-index: 1;
 position: relative;
 width: 100%;
 display: flex;
 background-color: #F4F4F6;
 flex-direction: row;
 height: 85rpx;
}
.sendmessage input {
 width: 75%;
 height: 60rpx;
 background-color: white;
 line-height: 60rpx;
 font-size: 28rpx;
 border-radius: 10rpx;
 margin-top: 10rpx;
 margin-left: 20rpx;
 border: 1px solid #d0d0d0;
 padding-left: 20rpx;
}
.sendmessage button {
 border: 1px solid white;
 width: 18%;
 height: 65rpx;
 background: #00CC00;
 color: white;
 line-height: 65rpx;
 margin-top: 10rpx;
 font-size: 28rpx;
} 

.hei{
 height: 20rpx;
}
.history {
 height: 80%;
 padding: 20rpx 20rpx 20rpx 20rpx;
 font-size: 14px;
 line-height: 50rpx;
 word-break: break-all;
} 

.icno_kf{
 position: fixed;
 bottom: 160rpx;
 margin: 0 auto;
 text-align: center;
 left: 50%;
 margin-left: -40rpx;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 聊天室简单实现

    微信小程序 聊天室简单实现 utils文件夹下websoctet.js文件 var url = 'ws://地址端口'; function connect(user, func) { wx.connectSocket({ url: url, header: {"content-type":'application/x-www-form-urlencoded'} }); wx.onSocketOpen(function (res) { send('{"type":&q

  • 微信小程序实时聊天WebSocket

    本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js var app = getApp(); var socketOpen = false; var SocketTask = false; var url = 'ws://192.168.0.120:7011'; Page({ data: { inputValue: '', returnValue:

  • 使用node.js实现微信小程序实时聊天功能

    在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的.但领导要求了,总是要干的. 然后就实时通讯这个关键词展开搜索,穿梭于网页之间.不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点. 最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的): 1.首先到官网下载node.js,下载链接 安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认

  • 微信小程序websocket实现聊天功能

    本文实例为大家分享了微信小程序websocket实现聊天功能的具体代码,供大家参考,具体内容如下 效果图: chat.js var utils = require("../../utils/util.js") Page({ /** * 页面的初始数据 */ data: { newsList:[], input:null, openid:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = thi

  • 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

  • 微信小程序实现聊天对话(文本、图片)功能

    本文实例为大家分享了微信小程序实现聊天对话功能的具体代码,供大家参考,具体内容如下 这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合. 上图: to_news.wxml <!--pages/index/to_news/to_news.wxml--> <view class='tab'> <view class='lan'>{{tabdata.title}}</view> <view class='tent'> <text&g

  • 微信小程序WebSocket实现聊天对话功能

    本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码,供大家参考,具体内容如下 js var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = 'ws://请填写您的长链接接口地址'; var upload_url ='请填写您的图片上传接口地址' Page({ data: { user_input_text: '',//用户输入文字 in

  • 微信小程序 WebSocket详解及应用

    微信小程序 WebSocket 实例效果: 今天主要说一下微信的WebSocket接口以及在小程序中的使用. WebSocket是什么(简述) 微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信. 因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,只是稍微介绍一下.想了解详细的WebSocket可以参考如下:WebSocket 协议 WebSocket与A

  • 微信小程序webSocket的使用方法

    博客简介 本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话: webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览

  • 微信小程序实现带刻度尺滑块功能

    摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签 通过bindscroll监听刻度尺触摸事件 渲染取值到页面 基本布局 <scroll-view scroll-x="true"

  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

  • 微信小程序实现添加手机联系人功能示例

    本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示   2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

    由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能. 使用 1.下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中 2.在页面的 WXML 文件中添加以下代码,将组件模板引入 <import src="../../img-loader/img-loader.w

  • 微信小程序实现的五星评价功能示例

    本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite

随机推荐