巩固一下NodeJs

这篇具有很好参考价值的文章主要介绍了巩固一下NodeJs。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

npm init 

2、安装express

npm i express
npm i ws

文件结构
巩固一下NodeJs,前端,javascript,开发语言

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

//导入下列模块,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、启动服务

node server.js

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

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文章来源地址https://www.toymoban.com/news/detail-561045.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>

到了这里,关于巩固一下NodeJs的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3前端开发,自学一下reactive,ref的差异是什么。

    vue3前端开发,自学,学习一下,reactive和ref的差别。以及基础用法。 前言,这2个东西,都能对外输出动态的数据对象。但是,有点区别,是,reactive只支持输入一个对象作为参数,ref则还可以支持简单的数据信息作为参数。待会有案例代码展示。 下面看看代码内容。第一个

    2024年01月18日
    浏览(53)
  • vue3前端开发,感受一下组合式api和VUE2选项式的差异

    vue3前端开发,感受一下组合式api和VUE2选项式的差异!今天开始,正式开始,进入学习Vue3的内容。以后代码,案例分享,都会采用组合式api的模式为大家做展示。 今天是第一节,带大家感受一下,Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先,大家需要提前使用

    2024年01月19日
    浏览(38)
  • 【Go语言开发】简单了解一下搜索引擎并用go写一个demo

    这篇文章我们一起来了解一下搜索引擎的原理,以及用go写一个小demo来体验一下搜索引擎。 搜索引擎一般简化为三个步骤 爬虫:爬取数据源,用做搜索数据支持。 索引:根据爬虫爬取到的数据进行索引的建立。 排序:对搜索的结果进行排序。 然后我们再对几个专业名词做

    2024年02月16日
    浏览(44)
  • 快速认识,前端必学编程语言:JavaScript

    JavaScript是构建Web应用必学的一门编程语言,也是最受开发者欢迎的热门语言之一。所以,如果您还不知道JavaScript的用处、特点的话,赶紧补充一下这块基础知识。 JavaScript 是一种高级、单线程、垃圾收集、解释或即时编译、基于原型、多范式、动态语言,具有非阻塞事件循

    2024年02月05日
    浏览(52)
  • 前端开发——Javascript知识(介绍)

    目录 有关JavaScript的知识  JavaScript的优点   JavaScript的领域 JavaScript的组成 JavaScript的特点 第一个JavaScript程序 在 HTML 文档中嵌入 JavaScript 代码 在脚本文件中编写 JavaScript 代码 JavaScript内容  Html内容  JavaScript 代码执行顺序 JavaScript中的几个重要概念 标识符 保留字 区分

    2024年02月01日
    浏览(47)
  • 前端开发——JavaScript的条件语句

      世界不仅有黑,又或者白 世界而是一道精致的灰  ——Lungcen     目录 条件判断语句 if 语句 if else 语句 if else if else 语句  switch语句 break case 子句 default语句 while循环语句 do while循环语句 for循环语句 for 循环中的三个表达式 for 循环嵌套 for 循环变体——for in for 循环

    2023年04月21日
    浏览(46)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(54)
  • nodejs项目实战教程01——http服务和URL类,前端开发社招面试解答之性能优化

    需要在终端重新执行一次node app.js浏览器的内容才会刷新 4.如何获取url中的参数 ============================================================================ 4.1 URL类基础 建议大家可以先看看Node.js API文档中的url 网址部分,这里做简要说明。url字符串在nodejs的url模块,有两种解析API,其中旧版的

    2024年04月11日
    浏览(46)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(65)
  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包