使用vue3+ websokect后台koa2后端实现聊天框(vue3+koa2)

我们使用websokect来实现一个聊天室的功能,这里我们用到的技术栈是vue3,然后使用koa2来模拟后端 以及如何使用websokect。

话不多说,直接上操作及代码。

首先我们先搭建好vue框架以及koa2的框架

这里我们就不细说了,可以直接去他们官网去看api。

搭建好框架以后,然后我们还需要下载一个  ws 的依赖

我这里使用的 是一个 7.5.0的一个版本

接下来我们写前端,这里直接上代码,

这里我都有注释,写的我认为很详细了,这样我们就已经写好前端 需要的了,我们再去后端使用

koa2 创建的·项目

这里如果启动你的后端项目的话直接用  node +文件名.js

 

这边也是很详细的写在了代码之中了,不懂得可以多看看,并没有多大的逻辑,就是要注意那边那个端口号,那个端口号并不需要你非得要哪个服务器的端口号,只需要咱们自己本地的端口号即可。 实现一个简单的聊天功能,看下效果。

 

 这边我们就从两个页面,实现了一个简单的聊天室功能了,剩下的就剩大家自己去排版创作了。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值