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


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了微信小程序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 

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
You might like
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php jsonp单引号转义
2014/11/23 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jquery validate demo 基础
2015/10/29 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
javascript表单正则应用
2017/02/04 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python实现的购物车功能示例
2018/02/11 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python实现列表的排序方法分享
2019/07/01 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python 实现数组相减示例
2019/12/27 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
学生实习自我鉴定
2013/10/11 职场文书
入党介绍人考察意见
2015/06/01 职场文书
redis 查看所有的key方式
2021/05/07 Redis
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python