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

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

效果图:

chat.js

var utils = require("../../utils/util.js")
Page({

 /**
  * 页面的初始数据
  */
 data: {
  newsList:[],
  input:null,
  openid:null
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var _this = this;
  wx.getStorage({
   key: 'OPENID',
   success: function(res) {
    _this.setData({
     openid:res.data
    })
   },
  })
  var _this = this;
  //建立连接
  wx.connectSocket({
   url: "wss://www.chat.blingfeng.cn/websocket/"+_this.data.openid+"/"+options.to,
  })

  //连接成功
  wx.onSocketOpen(function () {
   console.log('连接成功');
  })
  wx.onSocketMessage(function(res){

    var list = [];
    list = _this.data.newsList;
   var _data = JSON.parse(res.data);

    list.push(_data);
    console.log(list)
    _this.setData({
     newsList:list
    })

  })
 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 },
 send :function(){
  var _this = this;
  if(_this.data.input){
  wx.sendSocketMessage({
   data: _this.data.input,
  })
  var list = [];
  list = this.data.newsList;
  var temp = { 'message': _this.data.input, 'date': utils.formatTime(new Date()), type: 1 };
  list.push(temp);
  this.setData({
   newsList:list,
   input:null
  })
  }

 },
 bindChange:function(res){
  this.setData({
   input: res.detail.value
  })
 },
 back:function(){
  wx.closeSocket();
  console.log('连接断开');
 }
})

chat.wxml

<!--pages/index/to_news/to_news.wxml-->
<view class='top-content'>
 <image src='images/back.png' class='back-icon' bindtap='back'></image>
 <view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'>匿名聊天X</view>
</view>
<view class='news'>

 <view class="historycon">
  <scroll-view scroll-y="true" class="history">
   <block wx:for="{{newsList}}" wx:key>
    <!--此处为other -->
    <view wx:if="{{item.type==0}}">
     <view>
      <text class='chat-time'>{{item.date}}</text>
     </view>
     <view class='other-record'>
      <image class='other-head-img' src='images/headimg.png'></image>
      <view class='other-record-content-triangle'></view>
      <view class='other-record-content'>
      {{item.message}}</view>
     </view>
    </view>
    <!--此处为结尾 -->
    <!--此处为own -->
    <view wx:else>
     <view>
      <text class='chat-time'>{{item.date}}</text>
     </view>
     <view class='own-record'>
      <view class='own-record-content'>{{item.message}}</view>
      <view class='own-record-content-triangle'></view>
      <image class='own-head-img' src='images/headimg.png'></image>
     </view>
    </view>
    <!-- own结尾 -->
   </block>
  </scroll-view>
 </view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
 <input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" />
 <button class="btn" type="primary" plain="true" bindtap='send'>发送</button>
 <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />

</view>

chat.wxss

page {
 background-color: white; 

} 

.tab {
 padding: 20rpx 20rpx 40rpx 50rpx;
 height: 20%;
 background-color: white;
} 

.tab .tent {
 font-size: 33rpx;
 margin-bottom: 30rpx;
}
.jia_img{
 height: 80rpx;
 width: 90rpx;
}
.new_imgtent{
  height: 180rpx;
 width: 190rpx;
}
.tab .fabu {
 font-size: 33rpx;
 margin-top: 30rpx;
 margin-bottom: 30rpx;
} 

.xiahuaxia {
 width: 80%;
 text-align: center;
 margin: 0 auto;
 position: relative;
 top: 60rpx;
} 

.chat-time {
 text-align: center;
 padding: 5rpx 20rpx 5rpx 20rpx;
 width: 200rpx;
 font-size: 26rpx;
 background-color: #e6e6e6;
} 

.new_top_txt {
 width: 50%;
 position: relative;
 top: 38rpx;
 text-align: center;
 margin: 0 auto;
 font-size: 30rpx;
 color: #787878;
 background-color: #f7f7f7;
} 

/* 聊天内容 */ 

.news {
 margin-top: 30rpx;
 text-align: center;
 margin-bottom: 150rpx;
} 

.img_null {
 height: 60rpx;
} 

.l {
 height: 5rpx;
 width: 20%;
 margin-top: 30rpx;
 color: #000;
} 

/* 聊天 */ 

.my_right {
 float: right;
 position: relative;
 right: 40rpx;
} 

.you_left {
 float: left;
 position: relative;
 left: 5rpx;
} 

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

.sanjiao {
 top: 20rpx;
 position: relative;
 width: 0px;
 height: 0px;
 border-width: 10px;
 border-style: solid;
} 

.my {
 border-color: transparent transparent transparent #95d4ff;
} 

.you {
 border-color: transparent #95d4ff transparent transparent;
} 

.sendmessage {
 background-color: white;
 width: 100%;
 position: fixed;
 bottom: 0rpx;
 display: flex;
 flex-direction: row;
} 

.sendmessage input {
 width: 80%;
 height: 80rpx;
 background-color: white;
 line-height: 80rpx;
 font-size: 28rpx;
 border: 2rpx solid #d0d0d0;
 padding-left: 20rpx;
} 

.sendmessage button {
 border: 2rpx solid white;
 width: 18%;
 height: 80rpx;
 background: #fff;
 color: #000;
 line-height: 80rpx;
 font-size: 28rpx;
} 

.historycon {
 height: 90%;
 width: 100%;
 flex-direction: column;
 display: flex;
 margin-top: 100rpx;
 border-top: 0px;
}
.hei{
 margin-top: 50px;
 height: 20rpx;
}
.history {
 height: 100%;
 margin-top: 30rpx;
 margin: 20rpx;
 font-size: 28rpx;
 line-height: 80rpx;
 word-break: break-all;
}
.btn{
 margin-left: 5rpx;
 margin-right:4rpx;
}
.chat-input{
 margin-left: 5rpx;
}
.top-content{
 display: flex;
}
.back-icon{
 margin-top: 25rpx;
 margin-left: 25rpx;
 width:40rpx;
 height:40rpx;
}
.other-record-content{
 background-color: #FFEFDB ;
 width: 380rpx;
 border-radius: 7px;
 padding: 0rpx 30rpx 0rpx 30rpx;

}
.other-record{

  display: flex;
 justify-content:flex-start;
}
.other-head-img{
 width:70rpx;
 height:70rpx;
 margin: 10rpx 10rpx 10rpx 10rpx;
}
.other-record-content-triangle{
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-right: 40rpx solid #FFEFDB;
border-bottom: 15rpx solid transparent;
margin-top: 20rpx;
}
.own-record{
 display: flex;
 justify-content:flex-end;

}
.own-record-content{
 background-color: #F0F0F0 ;
 width: 380rpx;
 border-radius: 7px;
 padding: 0rpx 30rpx 0rpx 30rpx;
}
.own-record-content-triangle {
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-left: 40rpx solid #F0F0F0;
border-bottom: 20rpx solid transparent;
margin-top: 20rpx;
}
.own-head-img{
 width:70rpx;
 height:70rpx;
 margin: 10rpx 10rpx 10rpx 10rpx;
 padding-right:30rpx;
}
::-webkit-scrollbar{
 width: 0;
 height: 0;
 color: transparent;
}

github前后端都有地址:wx-chat

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

(0)

相关推荐

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

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考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

  • 微信小程序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

  • 微信小程序与AspNetCore SignalR聊天实例代码

    微信小程序与aspnetcore signalr实例 本文不对小程序与signalr做任何介绍,默认读者已经掌握 aspnetcore Signalr文档 小程序文档 写在之前 SignalR没有提供小程序使用的客户端js,所以本人参考signlar.js写了小程序版signalr-client.js 代码开源,地址 https://github.com/liangshiw/SignalRMiniProgram-Client 先上效果图 开始编码 首先需要创建一个aspnetcore的mvc项目

  • 微信小程序实时聊天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:

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

    今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实时应用上. 因为这里本人是分享小程序,所以就不去深究websocket的底层和协议了,感兴趣的朋友可以去看下websocket协议 建议大家在做之前先看看微信小程序官方提供的api关于websocket的文档,因为微

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

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

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

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

  • 详解微信小程序实现仿微信聊天界面(各种细节处理)

    本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下: 下面先来看看效果 为实现这样的效果,首先要解决两个问题: 1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题: 2.键盘弹出或收起时,聊天消息没有自动滚到最底部. 首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种): 1.计算每条消息的最大高度,设置scroll-top=(单条msg最大高度 * msg条数)px. 2.用 将展示msg的目标scroll-view包裹, 通过js获取到

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

    微信小程序 聊天室简单实现 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聊天室的实现示例代码

    背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30

随机推荐