巩固一下NodeJs

1、初始化(确保当前电脑有node环境)

bash 复制代码
npm init 

2、安装express

bash 复制代码
npm i express
bash 复制代码
npm i ws

文件结构

3、编写相关代码启动node服务(server.js)

javascript 复制代码
//导入下列模块,express搭建服务器,fs用来操作文件、ws用来实现webscoket
const express = require("express")
const path = require("path")
const app = express()
const fs = require("fs")
const txt =  fs.readFileSync('./msg.text','utf-8')

console.log("文件运行成功",txt)
app.all('*', function (req, res, next) {
    // 解决跨域
    res.header('Access-Control-Allow-Origin', '*');
    // 设置相应头数据
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    // 设置接收的方法
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
});

//编写127.0.0.1:3333/index接口
//返回值为resObj 
app.get("/index", (req, res) => {
    console.log("请求携带的参数", req)
    const resObj = {
        code: "200",
        msg: '成功了',
        data: [1, 2, 3]
    }
    //obj填写到msg.text文件中
    fs.writeFileSync('./msg.text',JSON.stringify(resObj ),'utf-8')
    res.json(resObj )
})

const serve = app.listen(3333, () => {
    console.log('服务启动成功');
})
//导入ws模块,实现双向通讯
const WebSocket = require('ws');
const clients = new Set();
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({server:serve });
// 监听连接事件
wss.on('connection', (ws) => {
    clients.add(ws);
    // 监听消息事件
    //以广播的形式发送消息
    ws.on('message', (message) => {
        clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                // 发送消息到客户端
                client.send(message);
            }
        });
    });
    
    // 监听关闭事件
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

4、启动服务

bash 复制代码
node server.js

5、编写前端(客户端)代码

ws.js

javascript 复制代码
const url = "ws://127.0.0.1:3333"
const ws = new WebSocket(url)
ws.onmessage = (e) => {
    console.log('接受到信息___________________>>>>>>>>>', e);
}
ws.onerror = function (err) {
    console.log(err)
}

ws.onclose = function (e) {
    console.log("中断连接", e)
}

ws.onopen = function (e) {
    console.log("打开连接", e)
} 
export default ws

App.vue

html 复制代码
<template>
	<div>
		<span @click="msgFn">点击发送消息</span>
	</div>
</template>
<script setup>
	import ws from './ws.js'
	const msgFn=()=>{
		ws.send({name:"tjq说xxxx"})
	}
</script>
<style scoped></style>
相关推荐
hj5914_前端新手14 分钟前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法18 分钟前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku29 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode34 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu35 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu35 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu39 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu40 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu44 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在1 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net