Node框架使用 (双工通信webSocket)

最新推荐文章于 2024-03-27 09:57:45 发布

文阳兄

最新推荐文章于 2024-03-27 09:57:45 发布

阅读量310

点赞数

文章标签： nodejs

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/107466132

版权

框架的作用
框架可以帮助省略掉一些基本的相同底层代码的反复书写，只需调用框架的方法就可以实现你想要的功能

Node 相关的框架

express
koa
egg
thinkjs
adonisjs
nestjs

简单的发送数据数据请求与关闭使用express实现

使用express实现服务端webSocket(双工通信)
使用的是安装相关框架与第三方插件
当已经安装后mon操作是nodemon 要进入的文件
HTML的代码.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="box">
        <p><input type="text" class="msg"></p>
        <p><button class="send">向服务器发送请求</button></p>
        <p><button class="closebtn">关闭与服务器的连接</button></p>
        <p class="result"></p>
    </div>
</body>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/index.js"></script>
</html>

客户端.js
这是服务端的代码后面的客户端的数据与服务端相互对应

const express=require("express")
//express是一个node的第三方框架
const expressWs =require("express-ws")
// express-ws是服务器实现websocket的包

const app=express()
// 定义一个基于express框架的app
app.use(express.static("/public"))
// 这一步是使用express框架的使用 可以直接使用静态的加载

// 连接websocket到APP应用中 
expressWs(app)
// 这个操作为服务器端 
// 这个/test是跟客户端相对应
app.ws("/test",( ws,req)=>{
   
 ws.on("message",(msg)=>{
   
  msg='客户 这是你发的信息:' + msg
  ws.send(msg)
 })
})
app.listen(3000,()=>{
   
    console.log('已启动服务器')
})

客户端代码.js

let ws=new WebSocket("ws://127.0.0.1:3000/test")
ws.onopen=function(){
   
 console.log('连接成功')
}
// 单击发送信息
$(".send").click(function(){
   
    let msg=$(".msg").val()
    ws.send(msg)
})
// 连接失败
ws.οnerrοr=function(){
   
    console.log('失败')
}

最低0.47元/天解锁文章

文阳兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node框架使用 (双工通信webSocket)

框架的作用框架可以帮助省略掉一些基本的相同底层代码的反复书写，只需调用框架的方法就可以实现你想要的功能Node 相关的框架expresskoaeggthinkjsadonisjsnestjs简单的发送数据数据请求与关闭使用的是安装相关框架与第三方插件当已经安装后mon操作是nodemon 要进入的文件HTML的代码.html<!DOCTYPE html><html lang="en"><head> <meta ch.
复制链接

扫一扫