加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:05:16 所属栏目:资源 来源:网络整理
导读:在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的。但领导要求了,总是要干的。 然后就实时通讯这个关键词展开搜索,穿梭于网页之间。不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和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文件,开始编辑你的服务端代码,这个随便你用记事本还是其他什么软件

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

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

npm install --save mysql

代码:

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

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

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

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

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

直接贴代码:

wxml:

{{item.user.name}} {{item.msg}} {{item.user.name}} {{item.msg}}

js:

wxss:

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实现微信小程序实时聊天功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读