node + socket + NetAPP 实现多人在线聊天

最新推荐文章于 2024-05-24 20:50:02 发布

SteveShenmo

最新推荐文章于 2024-05-24 20:50:02 发布

阅读量605

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/SteveShenmo/article/details/126675838

版权

本文档介绍了如何使用Node.js、Socket.IO和NetAPP搭建一个多人在线聊天应用。首先，通过前端原生JavaScript创建客户端，然后利用Node.js搭建后台服务，包括项目初始化、设置端口和启动服务。接着，引入Socket.IO库，分别在客户端和服务器端实现通信。最后，通过NetAPP进行内网穿透，使得本地应用可以被公网访问。详细步骤包括下载配置文件、设置端口、获取autoken并配置，以及启动服务。

摘要由CSDN通过智能技术生成

紧急因疫情隔离在家，闲来无事，突发奇想，开发一通讯平台，实时群聊。

思路：客户端发送消息，服务器响应，并将其反馈给在线用户,最后使用内网穿透链接至公网。

技术栈：

前端：原生js + socket

后台服务：nodejs + socket.io + NetAPP

首先，开发过程中需要前端页面作为客户端，然后以nodejs搭建后台服务，安装node环节之前文档有分享，不熟悉者自行查看。在此，首先搭建后台服务：

一、后台服务

1、新建空文件夹作为项目承载，初始化项目，终端代码：

yarn init -y

2、新建项目入口文件index.js,内容如下：

//index.js
const http = require("http");
const server = http.createServer((req, res)=>{
    res.end('后台反馈数据')
})

server.listen(3000)

至此，一个基本服务搭建完成，端口3000

3、启动服务，终端键入如下命令：

node index.js

通过localhost:3000即可访问

二、客户端

1、新建文件index.html

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8 /'>
<title>聊天室</title>
</head>
<body>
<h1>欢迎来到聊天室</h1>
<input type="text" placeholder="请留言！" value="" id="txt">
<button onclick="submit()" id="btn">发送</button>
<ul id="list"></ul>
</body>
<script>
function submit(){
    console.log('已发送')
}
</script>
</html>

至此，基本准备工作到位，接下来引入socket.io

终端安装socket.io依赖包

yarn add socket.io

后台服务引入socket，修改index.js文件

//index.js
const http = require("http");
const fs = require("fs");
const ws = require("socket.io");
const server = http.createServer((req, res)=>{
    const file = fs.readFileSync("./index.html",{encoding: 'utf-8'});
    res.end(file)
})

//实例化服务
const io = ws(server)

//监听连接
io.on("connection", socket=>{
    //监听前端提交的数据
    socket.on("message", mes=> {
        //数据广播，发送至每个用户
        io.emit("message", mes)
    })
})

server.listen(3000)

客户端引入socket,修改index.html

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8 /'>
<titl

最低0.47元/天解锁文章

SteveShenmo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫