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

在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的。但领导要求了,总是要干的。

然后就实时通讯这个关键词展开搜索,穿梭于网页之间。不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点。

最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的):

1.首先到官网下载node.js,下载链接

安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认就好

可以打开命令行窗口输入 node -v会输出版本,来检验是否安装成功,其实这个也没什么必要

2.然后新建一个文件夹(我的node.js是安装在Ç盘的,然后再d盘下新建了个叫webSocket的文件夹)

然后用命令转到该目录下:在这个文件下安装我们要使用的模块:安装模块前需要先生成一个配置文件,不然会报错(反正我报了)

生成配置文件命令:npm init -f

执行后可以看到在该文件下多了一个叫package.json的配置文件,先不用管(后面也没管过),接下来继续安装模块的操作

刚开始我是安装的socket.io,后来发现小程序根本用不了,所以这里也不说socket.io了。我们这里用ws

安装ws命令:npm install --save ws(卸载模块命令:npm uninstall  模块名字)

3.安装好模块后,在你目录下创建一个.js文件,我这是一个ws.js

我这里肯定会比你们的文件要多,不用在意。

然后打开这个.js文件,开始编辑你的服务端代码,这个随便你用记事本还是其他什么软件

这是最简单基础的一个打开连接,响应的代码:

//引入ws模块
const WebSocket = require('ws');
//创建服务 port是端口
const wss = new WebSocket.Server({ port: 80});
//客户端连接时会进这个
wss.on('connection', function connection(ws) {
  console.log('连接成功');
  //客户端发送消息时会触发这个
  ws.on('message', function incoming(data) {
    console.log('收到消息');
    //data是客户端发送的消息,这里clients.foreach是广播给所有客户端
    wss.clients.forEach(function each(client) {
      //把客户端发来的data,循环发给每个客户端
      client.send(data);
    });
  });
});

这里贴上稍微比较完善的代码,这里是用数据库保存的发送的消息,用的mysql,所以需要在安装mysql模块

npm install --save mysql

代码:

这里有很多注释的代码,都是我鼓捣时用到的,可以无视或删掉

这个MySQL的数据连接需要根据自己的修改,表也是

我这用到的表就两个字段 id ,msg

var http=require('http');
var qs = require('querystring'); //
var ws=require('ws');
var server=http.createServer(function (req, res) {
  res.end("This is a WebSockets server!");
});
var url = require('url');
//验证函数
function ClientVerify(info) {
  var ret = false;//拒绝
  //url参数
  var params = url.parse(info.req.url, true).query;
  //console.log(groupid);
  //groupid=params['groupid']
  //谁谁谁来到了讨论组
  // wss.clients.forEach(function each(client) {
  //   client.send('233');
  // });
  return true;
}
var wss = new ws.Server( { server: server,verifyClient: ClientVerify } );
/*//引入数据库
 var mysql = require('mysql');
 //连接数据库信息 普通版
 var connection = mysql.createConnection({
  host : '58.87.94.16',
  user : 'root',
  password : 'root',
  database : 'bootdo'
});*/
//引入数据库
var mysql = require('mysql');
// 创建数据池
const pool = mysql.createPool({
  host   : '58.87.94.16',  // 数据库地址
  user   : 'root',  // 数据库用户
  password : 'root',  // 数据库密码
  database : 'bootdo' // 选中数据库
})
/*接收一个sql语句 以及所需的values
这里接收第二参数values的原因是可以使用mysql的占位符 '?'
比如 query(`select * from my_database where id = ?`, [1])
好像可以直接使用pool.query,暂时不明*/
let query = function(sql,values,callback){
  pool.getConnection(function(err,conn){
    if(err){
      callback(err,null,null);
    }else{
      conn.query(sql,values,function(err,results,fields){
        //释放连接
        conn.release();
        //事件驱动回调
        callback(err,results,fields);
      });
    }
  });
};
module.exports=query;
wss.on('connection', function connection(ws) {
  console.log('链接成功!');
  //console.log(ws);
  //查询历史聊天记录 广播给连接的客户端
  var sql='select * from hi_test where groupid=1';
  console.log('sql语句',sql);
  query(sql,function (err,res,fields) {
    console.log('sql操作返回:', res);
    if(res!=null){
      ws.send(JSON.stringify(res));
    }
  });
  //监听客户端发送得消息
  ws.on('message', function incoming(data) {
    console.log('来自客户端得message:',data);
    //保存客户端发送得消息到数据库
    sql="insert into hi_test(msg) values(?)";
    console.log('sql语句',sql);
    query(sql,data,function (err,res,fields) {
      console.log('sql操作返回:',res);//res.insertId
    });
    var sendData=JSON.stringify([{msg:data}])
    /**
     * 把消息发送到所有的客户端
     * wss.clients获取所有链接的客户端
     */
    wss.clients.forEach(function each(client) {
      client.send(sendData);
    });
  });
});
server.listen(80, function listening() {
  console.log('服务器启动成功!');
});
/*发起get请求
var options = {
  hostname: 'www.tjjxsoft.cn',
  path: '/attendanceParameter/getAttendanceParameter/13',
  method: 'GET'
};
var req = http.request(options, function (res) {
  console.log('状态: ' + res.statusCode);
  res.on('data', function (chunk) {
    console.log('返回数据: ' + chunk);
  });
});
req.on('error', function (e) {
  console.log('problem with request: ' + e.message);
});
req.end();*/
/*
/!*构建http服务*!/
var app = require('http').createServer()
/!*引入socket.io*!/
var io = require('socket.io')(app);
/!*定义监听端口,可以自定义,端口不要被占用*!/
var PORT = 80;
/!*监听端口*!/
app.listen(PORT);
/!*定义用户数组*!/
var users = [];
/!**
 *监听客户端连接
 *io是我们定义的服务端的socket
 *回调函数里面的socket是本次连接的客户端socket
 *io与socket是一对多的关系
 *!/
io.on('connection', function (socket) {
  /!*所有的监听on,与发送emit都得写在连接里面,包括断开连接*!/
  socket.on('login',function(data){
    console.log('有人登录了:')
    console.log(data);
    users.push({
      username:data.username
    });
    /!*向所有连接的客户端广播add事件*!/
    io.sockets.emit('add',data)
  })
})
console.log('app listen at'+PORT);*/

然后命令行输入node ws.js(你自己的文件名)回车,就已经启动了服务

4.现在服务就已经起来了,接下来弄小程序这边的

直接贴代码:

wxml:

<view class='homeView'>
  <scroll-view scroll-y style="height:500px;" scroll-top='{{scrolltop}}'>
    <view class='listView'>
      <block wx:for="{{serverMsg}}" wx:key='*this'>
        <!-- -->
        <view wx:if="{{item.user.id!=userInfo.userId}}" class='leftView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsgleft'>
            <view>
            <!-- 我这用的是自己另一个服务的图片 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
            <view>{{item.msg}}</view>
          </view>
        </view>
        <view wx:else class='rightView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsg'>
            <view>{{item.msg}}</view>
            <view>
            <!-- 我这用的是自己另一个服务的图片 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class='sendView'>
    <input bindinput='sendTextBind' placeholder="输入聊天内容" value='{{sendText}}' />
    <button bindtap='sendBtn' type="primary">发送</button>
  </view>
</view>

js:

var app = getApp();
Page({
  data: {
    socket_open: false,//判断连接是否打开
    sendText: "",//发送的消息
    serverMsg: [],//接受的服务端的消息
    userInfo: { userId: 1, name: "呵呵",img:'头像'},//app.appData.userInfo,
    scrolltop: 999
  },
  /**输入内容 */
  sendTextBind: function(e) {
    this.setData({
      sendText: e.detail.value
    });
    console.log(this.data.sendText);
  },
  /**发送消息 */
  sendBtn: function(e) {
    console.log('发送消息事件!');
    var msgJson = {
      user: {
        id: this.data.userInfo.userId,//app.appData.userInfo.userId, //唯一ID区分身份
        name: this.data.userInfo.name, //显示用姓名
        img: this.data.userInfo.img, //显示用头像
      },
      msg: this.data.sendText,//发送的消息
      groupid:1
    }
    //发送消息
    this.send_socket_message(JSON.stringify(msgJson));
    this.setData({
      sendText: ""//发送消息后,清空文本框
    });
  },
  onLoad: function(options) {
    // app.login();
    // this.setData({
    //   userInfo: app.appData.userInfo
    // });
    //初始化
    this.wssInit();
  },
  wssInit() {
    var that = this;
    //建立连接
    wx.connectSocket({
      url: 'ws://localhost'//app.appData.socket
    })
    //监听WebSocket连接打开事件。
    wx.onSocketOpen(function(res) {
      console.log('WebSocket连接已打开!');
      that.setData({
        socket_open: true
      });
    });
    //监听WebSocket接受到服务器的消息事件。
    wx.onSocketMessage(function(res) {
      console.log('收到服务器内容:', res);
      var server_msg = JSON.parse(res.data);
      console.log(server_msg);
      if (server_msg != null) {
        var msgnew = [];
        for (var i = 0; i < server_msg.length; i++) {
          msgnew.push(JSON.parse(server_msg[i].msg));
        }
        msgnew=that.data.serverMsg.concat(msgnew);
        that.setData({
          serverMsg: msgnew,
          scrolltop: msgnew.length * 100
        });
        console.log(that.data.serverMsg);
      }
    });
    //监听WebSocket错误。
    wx.onSocketError(function(res) {
      console.log('WebSocket连接打开失败,请检查!', res)
    });
  },
  send_socket_message: function(msg) {
    //socket_open,连接打开的回调后才会为true,然后才能发送消息
    if (this.data.socket_open) {
      wx.sendSocketMessage({
        data: msg
      })
    }
  }
})

wxss:

.homeView {
  border-top: 1px solid #ededed;
}
.listView{
  padding-bottom: 50px;
}
.listView>view {
  padding: 10px;
}
.rightView {
  text-align: right;
}
.imgmsgleft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.imgmsgleft>view:last-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
}
.imgmsg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.imgmsg>view:first-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
  background-color: green;
}
.touimg {
  width: 50px;
  height: 50px;
}
.name {
  font-size: 14px;
  color: gray;
}
.sendView {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0px;
  border-top: 1px #ededed solid;
  background-color: white;
}
.sendView>button {
  width: 20%;
}
.sendView>input {
  width: 80%;
  height: auto;
}

效果图:

预览的时候一定要打开调试,因为这不是WSS协议,是没法直接用的、

总结

以上所述是小编给大家介绍的使用node.js实现微信小程序实时聊天功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 微信小程序在线客服自动回复功能(基于node)

    前言 我们知道H5页面经常需要将用户导流到APP,通过下载安装包或者跳转至应用宝市场/Appstore等方式进行导流.但是由于小程序嵌套webview时需要校验域名,因此跳转到第三方应用市场和Appstroe无法实现导流.那怎么办呢? 只能说道高一尺魔高一丈,看看微博小程序是怎么导流的: 曲线救国的方式,利用小程序的在线功能可以打开H5的方式,去进行下载引导. 于是,就引出了这次文档的主题,小程序在线客服自动回复功能. 阅读本文档之前,最好已经了解过小程序客服信息官方的相关文档: 客服消息使用指

  • 微信小程序组件 contact-button(客服会话按钮)详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • node.js微信小程序配置消息推送的实现

    在开发微信小程序时,有一个消息推送,它的解释是这样的. 消息推送具体的内容是下面的这个网址   https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html,他介绍的也还可以,就是我这里换成了node代码. 消息推送 启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 在微信小程序的首页开发里面,开发设置中,微信的官网中,

  • 微信小程序自动客服功能

    微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var

  • python实现微信小程序自动回复

    本文是使用Python的itchat模块进行微信私聊消息以及群消息的自动回复功能,必须在自己的微信中添加微信号xiaoice-ms(微软的微信机器人)才能实现,直接复制代码运行之后扫一扫二维码即可,经过测试,该程序能够保持几小时的时间. 实现原理,将别人发送给你的消息转发给AI小冰,然后再将AI的回复转回给那个人. 群消息也是如此,此外还添加了新年问候语,是否与他人进行AI聊天等功能.不过只能实现文本消息以及微信自带表情的转发,不能转发表情.语音等. # -*-coding:utf-8-*- i

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

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

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

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

  • 详解微信小程序开发聊天室—实时聊天,支持图片预览

    第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等.点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

  • 开发Node CLI构建微信小程序脚手架的示例

    本文介绍了 Node CLI 构建微信小程序脚手架的示例,分享给大家,具体如下: 目的 由于目前公司的 TOC 产品只要是微信小程序,而且随着业务的扩展, 会有更多的需求,创建更多的小程序,为了让团队避免每次开发前花费大量时间做比如工程化的一些配置,以及保持每个项目的一致性, 所以决定做一个 Node CLI 来创建微信小程序脚手架 节省开发前期的大量时间,新项目可以很快开始业务开发 保证项目统一性,有利于团队间的协作及工程化 提升团队基建意识,从枯燥无味的业务开发中脱离出来,尝试新的东西,即使

  • JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • JS中微信小程序自定义底部弹出框

    实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_a

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

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

随机推荐