巩固一下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>
相关推荐
bst@微胖子39 分钟前
Python高级语法之selenium
开发语言·python·selenium
王小义笔记44 分钟前
Postman如何流畅使用DeepSeek
开发语言·测试工具·lua·postman·deepseek
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
java1234_小锋3 小时前
一周学会Flask3 Python Web开发-request请求对象与url传参
开发语言·python·flask·flask3
流星白龙5 小时前
【C++】36.C++IO流
开发语言·c++
诚信爱国敬业友善6 小时前
常见排序方法的总结归类
开发语言·python·算法
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
nbsaas-boot7 小时前
Go 自动升级依赖版本
开发语言·后端·golang
架构默片7 小时前
【JAVA工程师从0开始学AI】,第五步:Python类的“七十二变“——当Java的铠甲遇见Python的液态金属
java·开发语言·python
不只会拍照的程序猿8 小时前
从插入排序到希尔排序
java·开发语言·数据结构·算法·排序算法