美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 美高梅官方网站开户微信小程序WebSocket达成聊天

美高梅官方网站开户微信小程序WebSocket达成聊天

发布时间:2019-08-14 18:01编辑:美高梅官方网站开户浏览(198)

     encodeStr: function (str) {
      var character = str.split("\u");
      var native1 = character[0];
      for (var i = 1; i < character.length; i  ) {
       var code = character[i];
       native1  = String.fromCharCode(parseInt("0x"   code.substring(0, 4)));
       if (code.length > 4) {
        native1  = code.substring(4, code.length);
       }
      }
      return native1
     },
    

    css

    utils文件夹下websoctet.js文件

    美高梅官方网站开户 ,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":"login","client_name":"' user.nickName '","room_id":"1"}')
     });
    //接受消息
     wx.onSocketMessage(func);
    }
    
    //发送消息
    function send(msg) {
     wx.sendSocketMessage({ data: msg });
    }
    module.exports = {
     connect: connect,
     send: send
    }
    
    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)
     })
    } 
    

    具体页面.js文件内容:

    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%
    }
    

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

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

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:美高梅官方网站开户微信小程序WebSocket达成聊天

    关键词: 美高梅开户