微信小程序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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
Javascript创建类和对象详解
May 31 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
js实现数字滚动特效
Dec 16 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python 将字符串转换成字典dict
2013/03/24 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
信息总监管理职责范本
2014/03/08 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers