Nodejs+Websocket+uniapp完成聊天

前言

最近想做一个聊天,但是网上的很多都是不能实现的,要么就是缺少代码片段很难实现websocket的链接,更别说聊天了。自己研究了一番之后实现了这个功能。值得注意的是,我想在小程序中使用socket.io,不好使,可能是个人技术不到位的问题吧,没有实现。但是使用websocket可以完成这个功能。

环境准备

node @14.16.1

express @4.19.2

vsocde

HbuilderX

微信开发者工具

后端的依赖

后端代码

app.js文件的代码

// express具体使用看我提供个文章中有
const express = require('express')
const app = express()
const websocket = require('websocket').server
const http = require('http')const httpServer = http.createServer().listen(3000,()=>{console.log('http server is running at port 3000');
})
const websocketServer = new websocket({httpServer: httpServer,autoAcceptConnections: false
})const conArr = []websocketServer.on('request', function(request) {// 这就是一次客户端发送的消息// websocket 需要将这个链接保存起来// 只要客户端和服务器没有断开,这个链接必须在// 客户端与服务端的通信都是从这个链接上通信const connection = request.accept()// 每次接收一个链接,将它存放在数组里面conArr.push(connection)// 监听客户端发送的消息connection.on('message', function(message) {console.log(message);// 发送消息给客户端(广播到各个客户端)// 后面加上 utf8Data 编码// 要将所有的链接全部发出去,才可以让每个客户端接收到其他传来的数据for(let i = 0; i < conArr.length; i++) {conArr[i].send(message.utf8Data)}})
})app.get('/', (req, res) => {res.send('Hello World!')
})app.listen(8080, () => {console.log('Express server is running at port 3000');
})

简单分析一下,websocket是基于http协议的所以要导入http模块,express和websocket监听的端口不一样,这样的话前端可以调用存储聊天信息的接口往数据库表中插入聊天信息,这样就可以完成聊天记录的存储,现在这个demo就是做了一个简单的websocket的链接和简陋的聊天界面。后续会完善一个开源项目完成聊天的功能、撤回和聊天记录回显的功能。

前端代码(uniapp)

<template><view>姓名:<input type="text" v-model="name" />话语:<input type="text" v-model="text" /><button @click="onSumbit">发送</button></view>
</template>
<script>export default{data(){return{name:'',text:''}},onLoad() {this.getLink()},methods:{// 在页面或组件的方法中调用,初始化链接websocketgetLink(){uni.connectSocket({url: 'ws://127.0.0.1:3000',success() {console.log('WebSocket连接成功');},fail(err) {console.error('WebSocket连接失败', err);}});},// 收到信息getJieShouMessage(){uni.onSocketMessage(function (res) {console.log('收到消息:', res.data);});},// websocket发生了错误getErrorMessage(){uni.onSocketError(function (err) {console.error('WebSocket错误:', err);});},// websocket关闭getSocketGuanBi(){uni.onSocketClose(function () {console.log('WebSocket连接已关闭');});},// 如果不需要的话就关闭websocketgetCloseThisLiaotian(){uni.closeSocket({code: 1000,  // 关闭连接的状态码,可选reason: '用户关闭连接',  // 关闭连接的原因,可选success() {console.log('WebSocket连接已关闭');},fail(err) {console.error('WebSocket关闭失败', err);}});},// 这个是点击发送信息onSumbit(){var that = thislet values={name:this.name,context:this.text}uni.sendSocketMessage({data: JSON.stringify(values),success() {console.log('消息发送成功');that.getJieShouMessage()},fail(err) {console.error('消息发送失败', err);}});}}}
</script>

注意

getLink(){uni.connectSocket({url: 'ws://127.0.0.1:3000',success() {console.log('WebSocket连接成功');},fail(err) {console.error('WebSocket连接失败', err);}});},

这段代码中,需要初始化调用,进行链接websocket,url是ws协议,线上的地址需要wss协议,具体可以参考微信官方的wss协议要求,我这demo是微信小程序。

效果图

通过上图可以看见可以及时的收到信息,前端拿到信息进行渲染就可以完成websocket的及时通讯了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从0.1nm到1mm:显微测量仪在抛光至粗糙表面测量中的技术突破

显微测量仪是纳米级精度的表面粗糙度测量技术。它利用光学、电子或机械原理对微小尺寸或表面特征进行测量&#xff0c;能够提供纳米级甚至更高级别的测量精度&#xff0c;这对于许多科学和工业应用至关重要。 在抛光至粗糙表面测量中&#xff0c;显微测量仪器具有从0.1nm到1mm…

java:程序包javax. servLet不存在

一.原因 1.项目Tomcat 服务器依赖未导入 2.项目的 SDK 版本选择错误 二.解决方法 方案一&#xff1a; 1.选择项目结构选项 2.导入Tomcat依赖 把tomcat里面的【jsp-api.jar】和【servlet-api.jar】这两个包导入 方案二&#xff1a; 1.选择项目结构选项 2.选择自己的jdk版本…

Kubernates-dashbord-安装

生成证书 openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout kube-dashboard.key -out kube-dashboard.crt -subj "/CNdashboard.kube.com/Okubernetes.dashboard.domain.com" kubectl create secret tls dashboard-tls --key kube-dashboard.key --cert…

Golang | Leetcode Golang题解之第108题将有序数组转换为二叉搜索树

题目&#xff1a; 题解&#xff1a; func sortedArrayToBST(nums []int) *TreeNode {rand.Seed(time.Now().UnixNano())return helper(nums, 0, len(nums) - 1) }func helper(nums []int, left, right int) *TreeNode {if left > right {return nil}// 选择任意一个中间位置…

「动态规划」删除并获得点数

力扣原题链接&#xff0c;点击跳转。 给你一个整数数组nums。每次操作&#xff0c;可以删除任意一个值n&#xff0c;接着获得点数n&#xff0c;并同时删除所有的n-1和n1。你最多能获取多少点数&#xff1f; 这个问题的解法相当巧妙。我们可以把问题先转化一下。用类似计数排序…

浅谈,Java当中普通类与抽象类的区别

前言 这篇博客没有什么特别有技术含量的地方,只是对于JavaSE 基础语法的一个小总结,基本功还是很重要的,因此笔者想写下来而已 普通类 什么是普通类? 普通类是可以直接实例化的类&#xff0c;包含具体的实现和属性。它是Java中最常见的类类型&#xff0c;用于创建对象和实现…

【Python性能优化】取最值的差异

取最值的差异 测试Windows 测试结果Linux 测试结果 测试 测试内容&#xff1a;从一组 x, y, z 坐标值中获得每个维度&#xff08;x、y、z&#xff09;的值域范围。此处不考虑将数据临时存放到内存&#xff0c;再整组获取值域的操作&#xff08;因为对单文件这么做问题不大&…

PS系统教学01

在前面几节内容基本介绍了PS的基本作用&#xff0c;简单的对PS中的某些基础功能进行介绍应用。 接下来我们进行系统的分享。 本次分享内容 基础的视图操作 接下来我们是对于PS工作区域的每个图标工具进行详细的分享 抓手工具缩放工具 这个图标是将工具栏由一列变成两列 一…

004 String

文章目录 String设计为不可变原因安全性缓存哈希值字符串池化不可变对象的天然线程安全提高代码可读性 private finalString a new String("ccc");和String b "ddd"使用new关键字创建字符串使用字符串字面量创建字符串 去掉final内部状态的不一致性多线程…

SpringBoot——整合SLF4j进行日志记录

目录 日志 项目总结 新建一个SpringBoot项目 pom.xml application.properties项目配置文件 logger.xml日志配置文件 TestController控制器 SpringbootSlf4jApplication启动类 启动项目 生成logger.log日志文件 日志 在开发中&#xff0c;我们经常使用 System.out.prin…

物联网六大核心技术——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网六大核心技术&#xff0c;是构建万物互联的基础&#xff0c;它们相互协作&#xff0c;共同实现物联网的广泛应用和深远影响。这六大技术分别是感知技术、网络通信技术、智能识别技术、计算技术、平台技术和安全技术&#xff0c;它们…

aws lakeformation注册s3位置的原因

参考资料 lakeformation底层数据的访问逻辑 向lakeformation注册s3位置的目的是让lakeformation控制对AWS S3 位置底层数据的访问&#xff08;以下简称LF&#xff09; 注册s3位置后可以进行两种授权 数据访问授权&#xff08;SELECT、INSERT 和 DELETE&#xff09; 数据位置…

不含一阶导数项的线性二阶微分方程的通解

假设这里有一个线性二阶微分等式&#xff0c;形式如下&#xff1a; &#xff08;1&#xff09; 其中是连续的&#xff0c;是在实闭区间是连续的,如果有人倾向于推广&#xff0c;在相对假弱的假设下&#xff0c;这个结果能够被发现。如果是下列其次线性方程的任意两个线性无关的…

小度推出全球首款基于文心大模型的学习机Z30,仅售价6699元

5月27日&#xff0c;小度科技召开新品发布会&#xff0c;全球首款基于文心大模型的学习机——小度学习机Z30重磅发布。 据「TMT星球」了解&#xff0c;该产品基于文心大模型&#xff0c;重新定义了“AI老师”的能力边界&#xff0c;不仅是一款能为孩子提供全面、有效学习辅导的…

报修新选择:一款软件搞定所有维修问题

数字化、智能化时代发展迅速&#xff0c;各类便捷、智能化软件应用已经深入到我们生活和工作的方方面面。尤其是在企业或学校的设备管理中&#xff0c;报修维修工作一直是一个重要环节。传统的报修方式&#xff0c;如电话报修、填写纸质报修单等&#xff0c;已经无法满足现代高…

Superset二次开发之柱状图自定义初始化时Data Zoom数据缩放值

Superset项目柱状图来自Echarts 首先Echarts实现柱状图数据缩放初始化默认值的效果 核心代码 设置Datazoom 的start 和end myChart.showLoading(); $.get(ROOT_PATH /data/asset/data/obama_budget_proposal_2012.list.json,function (obama_budget_2012) {myChart.hideLoa…

Python 文件操作指南:使用 open 和 with open 实现高效读写

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本系列文章主要分享文件操作&#xff0c;了解如何使用 Python 进行文件的读写操作&#xff0c;介绍常见文件格式的读取和写入方法&#xff0c;包括TXT、 CS…

aws lakeformation工作流程和权限管理逻辑

lakeformation在IAM权限模型之外提供独立的更细粒度的权限&#xff0c;控制数据湖数据的访问 能够提供列、行和单元格级别的精细控制 lakeformation的目的是要取代s3和iam策略&#xff0c;主要功能为 数据摄入&#xff0c;LF可以将不同类型的数据统一管理安全管理&#xff0…

SRAM和Flash的区别

什么是SRAM SRAM的特点 什么是Flash Flash存储器的特点 SRAM和Flash的区别 什么是SRAM SRAM&#xff1a;全称为Static Random Access Memory&#xff0c;即静态随机存取存储器&#xff0c;是一种常见的计算机内存类型。 SRAM电路通常由存储矩阵、地址译码器和读/写控制电路三…

小程序内使用路由

一:使用组件 1)创建组件 2)在需要的页面的json/app.json可实现局部使用和全局使用 在局部的话,对象内第一层,window配置也是第一层,而在全局配置也是在第一层,window在window对象内.第二层.内部执行遍历不一样. 3)页面使用 上述所写可实现在页面内使用组件.效果是页面内可以将…