外汇网站官网源码分享大全最新？外汇网址(外汇网站官网源码是什么)

大家好！今天让小编来大家介绍下关于外汇网站官网源码分享大全最新？外汇网址的问题，以下是酷知号的小编对此问题的归纳整理，让我们一起来看看吧。

大家好，关于外汇网站官网源码分享大全最新很多朋友都还不太明白，今天小编就来为大家分享关于外汇网址的知识，希望对各位有所帮助！

hello大家好，我是superZidan，这篇文章想跟大家聊聊使用Socket.io和React开发一个聊天应用，如果大家遇到任何问题，欢迎联系我

这篇文章是关于什么的

相信大家对于web版的线上聊天室都不陌生，这篇文章主要讲的就是如何使用Socket.io和React开发一下简单的线上聊天应用。

所谓线上聊天应用，就是你给一个人或者一个群发送一条消息，他们可以看到这条消息并且可以回复。既简单又复杂。

开发一个聊天室应用，你需要在新信息来到的时候及时的感知到。

通常来说，为了获得服务端的信息，我们需要发送一个HTTP请求。但是如果使用websockets，服务端能够主动告知你有新的信息到来而不需要客户端发起请求。

在本文中，我们将利用Socket.io提供的实时通信来创建一个开放式聊天应用程序，允许用户在该应用程序上发送和接收来自多个用户的消息。同时你也将学习到如何检测用户是否在线以及用户什么时候在输入。

为了更好的掌握这篇文章讲到的内容，你可能需要先掌握关于React.js和Node.js的基础知识

什么是Socket.io

Socket.io是一个十分流行的JavaScript库。它允许我们在浏览器和Node.js服务端之间创建一个实时的，双向的通信。它是一个高性能并且可靠的库，经过优化可以以最小的延迟处理大量数据。它遵循WebSocket协议并提供更好的功能，比如降级为HTTP长链接或者自动重连，这些功能可以协助我们构建一个高效的实时的应用。

如何通过Socket.io连接React.js应用到Node.js服务

在这个章节中，我们将开始为聊天室应用搭建项目环境。您还将学习如何将Socket.io添加到React和Node.js应用程序，并连接两个开发服务器以通过Socket.io进行实时通信。

创建项目目录，并创建两个子目录名为client和server

$mkdirchat-appn$cdchat-appn$mkdirclientservern

进入到client目录下，通过终端创建React.js项目

$cdclientn$npxcreate-react-app./n

安装Socket.io客户端API以及ReactRouter

$npminstallsocket.io-clientreact-router-domn

从React项目中删除冗余的文件像是logo和测试文件，像下面一样更新App.js文件来显示HelloWorld

functionApp(){nreturn(n<div>n<p>HelloWorld!</p>n</div>n);n}n

接下来，进入server目录下，创建一个package.json文件

$cdservern$npminit-yn

安装Express.js,CORS,Nodemon,和Socket.io服务端API

$npminstallexpresscorsnodemonsocket.ion

创建一个index.js文件，作为web服务器的入口文件

touchindex.jsn

使用Express创建一个简单的Node.js服务。当我们在浏览器访问http://localhost:4000/api的时候，下面的代码会返回一个JSON对象

//index.jsnconstexpress=require(&39;);nconstapp=express();nconstPORT=4000;nnapp.get(&39;,(req,res)=>{nres.json({nmessage:&39;,n});n});nnapp.listen(PORT,()=>{nconsole.log(`Serverlisteningon${PORT}`);n});n

导入HTTP和CORS库，来让数据能够在客户端和服务端之间传递

constexpress=require(&39;);nconstapp=express();nconstPORT=4000;nn//新导入的模块nconstserver=require(&39;).Server(app);nconstcors=require(&39;);nnapp.use(cors());nnapp.get(&39;,(req,res)=>{nres.json({nmessage:&39;,n});n});nnserver.listen(PORT,()=>{nconsole.log(`Serverlisteningon${PORT}`);n});n

接下来，添加Socket.io到项目中去创建一个实时连接

//新导入nconst{Server}=require(&34;);nn//创建实时连接nconstsocketIO=newServer(server,{ncors:{norigin:&34;n}n});nn//app.get代码省略…nn//监听连接nsocketIO.on(&39;,(socket)=>{nconsole.log(`?:${socket.id}用户已连接!`);nsocket.on(&39;,()=>{nconsole.log(&39;);n});n});n

从上面的代码中看到，每当用户访问页面的时候，socket.io(&34;)建立了与React应用的连接，然后为每个socket创建一个唯一的ID，然后将ID打印到控制台

当你刷新或者关闭页面，socket会触发disconnect事件，显示一个用户已从socket断开链接。

接下来，通过在package.json中添加scripts启动来配置Nodemon。代码如下

//在server/package.jsonnn&34;:{n&34;:&34;Error:notestspecified\&34;,n&34;:&34;n},n

你可以通过下面的命令来通过Nodemon启动服务

$npmstartn

打开client目录下的App.js文件，把React应用连接到Socket.io服务

importsocketIOfrom&39;;nconstsocket=socketIO.connect(&39;)nnfunctionApp(){nreturn(n<div>n<p>HelloWorld!</p>n</div>n);n}n

启动客户端React.js服务

//client目录下运行nn$npmstartn

在客户端和服务端的服务都启动之后，React应用的ID会显示在服务端的终端上。

恭喜，React应用已经通过Socket.io成功连接到服务端

对于本文的其余部分，我将引导你完成为聊天应用程序创建网页以及在React应用程序和Node.js服务器之间来回发送消息的过程。我还将指导你如何在收到新消息时添加自动滚动功能以及如何在你的聊天应用程序中获取活跃用户

为聊天应用创建主页

在本章节中，我们将为聊天应用创建一个主页。主页会接收用户名并将其保存到本地存储以供识别

在client/src目录下创建一个名为components的目录。然后，创建主页的组件

$cdsrcn$mkdircomponents&cdcomponentsn$touchHome.jsn

将下面的代码复制到Home.js文件中。该代码片段显示一个表单输入，该表单输入接受用户名并将其存储在本地存储中。

importReact,{useState}from&39;;nimport{useNavigate}from&39;;nnconstHome=()=>{nconstnavigate=useNavigate();nconst[userName,setUserName]=useState(&39;);nnconsthandleSubmit=(e)=>{ne.preventDefault();nlocalStorage.setItem(&39;,userName);nnavigate(&39;);n};nreturn(n<formclassName=&34;onSubmit={handleSubmit}>n<h2className=&34;>登录聊天</h2>n<labelhtmlFor=&34;>用户名</label>n<inputntype=&34;nminLength={6}nname=&34;nid=&34;nclassName=&34;nvalue={userName}nonChange={(e)=>setUserName(e.target.value)}n/>n<buttonclassName=&34;>登录</button>n</form>n);n};nnexportdefaultHome;n

接下来配置ReactRouter来让聊天应用的不同页面可以相互跳转。对于这个应用来说，主页和聊天页就足够了

把下面的代码复制到src/App.js文件中

import{BrowserRouter,Routes,Route}from&39;;nimportHomefrom&39;;nimportChatPagefrom&39;;nimportsocketIOfrom&39;;nnconstsocket=socketIO.connect(&39;);nfunctionApp(){nreturn(n<BrowserRouter>n<div>n<Routes>n<Routepath=&34;element={<Homesocket={socket}/>}></Route>n<Routepath=&34;element={<ChatPagesocket={socket}/>}></Route>n</Routes>n</div>n</BrowserRouter>n);n}nnexportdefaultApp;n

该代码片段使用ReactRouterv6为应用程序的主页和聊天页面分配不同的路由并且将socket.io库传到组件中。我们将在接下来的章节中创建聊天页面。

跳到src/index.css文件，复制下面的代码。它包含了这个项目所需要用到的所有CSS

@importurl(&39;);nn*{nbox-sizing:border-box;nmargin:0;npadding:0;nfont-family:&39;,sans-serif;n}n.home__container{nwidth:100%;nheight:100vh;ndisplay:flex;nflex-direction:column;njustify-content:center;nalign-items:center;n}n.home__container>*{nmargin-bottom:10px;n}n.home__header{nmargin-bottom:30px;n}n.username__input{npadding:10px;nwidth:50%;n}n.home__cta{nwidth:200px;npadding:10px;nfont-size:16px;ncursor:pointer;nbackground-color:f9f5eb;noutline:none;nborder:none;nborder-radius:5px;n}n.chat{nwidth:100%;nheight:100vh;ndisplay:flex;nalign-items:center;n}n.chat__sidebar{nheight:100%;nbackground-color:fdfdfd;n}n.chat__main{nheight:100%;nflex:0.8;n}n.chat__header{nmargin:30px020px0;n}n.chat__users>*{nmargin-bottom:10px;ncolor:f9f5eb;n}n.leaveChat__btn{npadding:10px;nwidth:150px;nborder:none;noutline:none;nbackground-color:eae3d2;n}n.message__container{nwidth:100%;nheight:80vh;nbackground-color:f9f5eb;nheight:10vh;n}n.form{nwidth:100%;nheight:100%;ndisplay:flex;nalign-items:center;njustify-content:space-between;n}n.message{nwidth:80%;nheight:100%;nborder-radius:10px;nborder:1pxsolideae3d2;ncursor:pointer;n}n.sendBtn:hover{nbackground-color:rgb(129,201,129);n}n.message__recipient{nbackground-color:39;react&39;./ChatBar&39;./ChatBody&39;./ChatFooter&34;chat&34;chat__main&39;react&34;chat__sidebar&34;chat__header&34;chat__users&39;react&39;react-router-dom&39;userName&39;/&34;chat__mainHeader&34;leaveChat__btn&34;message__container&34;message__chats&34;sender__name&34;message__sender&34;message__chats&34;message__recipient&39;mgood,you?</p>n</div>n</div>nn{/*当有用户正在输入，则被触发*/}n<divclassName=&34;>n<p>Someoneistyping…</p>n</div>n</div>n</>n);n};nnexportdefaultChatBody;n

ChatFooter组件

在这里，我们将在聊天页面底部创建输入和发送按钮。提交表单后，消息和用户名出现在控制台中。

importReact,{useState}from&39;;nnconstChatFooter=()=>{nconst[message,setMessage]=useState(&39;);nnconsthandleSendMessage=(e)=>{ne.preventDefault();nconsole.log({userName:localStorage.getItem(&39;),message});nsetMessage(&39;);n};nreturn(n<divclassName=&34;>n<formclassName=&34;onSubmit={handleSendMessage}>n<inputntype=&34;nplaceholder=&34;nclassName=&34;nvalue={message}nonChange={(e)=>setMessage(e.target.value)}n/>n<buttonclassName=&34;>发送</button>n</form>n</div>n);n};nnexportdefaultChatFooter;n

在React应用和Socket.io服务之间发送消息

在本节中，您将学习如何通过Socket.io将消息从React应用程序发送到Node.js服务器，反之亦然。要将消息发送到服务器，我们需要将Socket.io库传递到ChatFooter-发送消息的组件

更新ChatPage.js文件以将Socket.io库传递到ChatFooter组件中

importReactfrom&39;;nimportChatBarfrom&39;;nimportChatBodyfrom&39;;nimportChatFooterfrom&39;;nnconstChatPage=({socket})=>{nreturn(n<divclassName=&34;>n<ChatBar/>n<divclassName=&34;>n<ChatBody/>n<ChatFootersocket={socket}/>n</div>n</div>n);n};nnexportdefaultChatPage;n

更新ChatFooter组件中的handleSendMessage函数以将消息发送到Node.js服务器

importReact,{useState}from&39;;nnconstChatFooter=({socket})=>{nconst[message,setMessage]=useState(&39;);nnconsthandleSendMessage=(e)=>{ne.preventDefault();nif(message.trim()&&localStorage.getItem(&39;)){nsocket.emit(&39;,{ntext:message,nname:localStorage.getItem(&39;),nid:`${socket.id}${Math.random()}`,nsocketID:socket.id,n});n}nsetMessage(&39;);n};nreturn<divclassName=&34;>…</div>;n};nnexportdefaultChatFooter;n

handleSendMessage函数在发送包含用户输入、用户名、生成的消息ID以及socket或客户端的消息事件之前检查文本字段是否为空以及用户名是否存在于本地存储（从主页登录）Node.js服务器的ID。

打开服务器的index.js文件，更新Socket.io相关代码以监听来自React应用程序客户端的消息事件，并将消息打印到服务器的终端

socketIO.on(&39;,(socket)=>{ntconsole.log(`?:${socket.id}用户已连接!`);nn//监听和在控制台打印消nsocket.on(&39;,(data)=>{nconsole.log(data);n});nnsocket.on(&39;,()=>{nconsole.log(&39;);n});n});n

我们已经能够在服务器上检索消息；因此，让我们将消息发送给所有连接的客户端。

nsocketIO.on(&39;,(socket)=>{nconsole.log(`?:${socket.id}用户已连接!`);nnt//发送信息给到所有在线的用户nsocket.on(&39;,(data)=>{nsocketIO.emit(&39;,data);n});nnsocket.on(&39;,()=>{nconsole.log(&39;);n});n});n

更新ChatPage.js文件以监听来自服务器的消息并将其显示给所有用户

importReact,{useEffect,useState}from&39;;nimportChatBarfrom&39;;nimportChatBodyfrom&39;;nimportChatFooterfrom&39;;nnconstChatPage=({socket})=>{nconst[messages,setMessages]=useState([]);nnuseEffect(()=>{nsocket.on(&39;,(data)=>setMessages([…messages,data]));n},[socket,messages]);nnreturn(n<divclassName=&34;>n<ChatBarsocket={socket}/>n<divclassName=&34;>n<ChatBodymessages={messages}/>n<ChatFootersocket={socket}/>n</div>n</div>n);n};nnexportdefaultChatPage;n

从上面的代码片段中，Socket.io监听通过messageResponse事件发送的消息并将数据传到消息数组中。消息数组被传递到ChatBody组件以显示在UI上

更新ChatBody.js文件来渲染消息数组中的数据

importReactfrom&39;;nimport{useNavigate}from&39;;nnconstChatBody=({messages})=>{nconstnavigate=useNavigate();nnconsthandleLeaveChat=()=>{nlocalStorage.removeItem(&39;);nnavigate(&39;);nwindow.location.reload();n};nnreturn(n<>n<headerclassName=&34;>n<p>与朋友聚会</p>n<buttonclassName=&34;onClick={handleLeaveChat}>n离开聊天n</button>n</header>nn<divclassName=&34;>n{messages.map((message)=>nmessage.name===localStorage.getItem(&39;)?(n<divclassName=&34;key={message.id}>n<pclassName=&34;>You</p>n<divclassName=&34;>n<p>{message.text}</p>n</div>n</div>n):(n<divclassName=&34;key={message.id}>n<p>{message.name}</p>n<divclassName=&34;>n<p>{message.text}</p>n</div>n</div>n)n)}nn<divclassName=&34;>n<p>有用户正在输入…</p>n</div>n</div>n</>n);n};nnexportdefaultChatBody;n

上面的代码片段根据是你或是其他用户发送了消息来显示消息。绿色的消息是你发送的消息，红色的是来自其他用户的消息。

恭喜，聊天应用现在可以正常使用了。你可以打开多个Tab并将消息从一个Tab发送到另一个Tab

如何从Socket.io获取活跃用户

在本节中，你将学习如何获取所有活跃用户并将他们显示在聊天应用程序的聊天栏上。

打开src/Home.js并创建一个在用户登录时监听的事件。更新handleSubmit函数如下：

importReact,{useState}from&39;;nimport{useNavigate}from&39;;nnconstHome=({socket})=>{nconstnavigate=useNavigate();nconst[userName,setUserName]=useState(&39;);nnconsthandleSubmit=(e)=>{ne.preventDefault();nlocalStorage.setItem(&39;,userName);ntt//发送用户名和socketID到Node.js服务器nsocket.emit(&39;,{userName,socketID:socket.id});nnavigate(&39;);n};nreturn(…)n…n

创建一个事件监听器，每当用户加入或离开聊天应用时，它就会更新Node.js服务器上的users数组。

letusers=[];nnsocketIO.on(&39;,(socket)=>{ntconsole.log(`?:${socket.id}用户已连接!`);nsocket.on(&39;,(data)=>{nsocketIO.emit(&39;,data);n});nn//监听新用户的加入nsocket.on(&39;,(data)=>{n//添加新用户到users中nusers.push(data);n//console.log(users);n//发送用户列表到客户端nsocketIO.emit(&39;,users);n});nnsocket.on(&39;,()=>{nttconsole.log(&39;);n//当用户下线的时候更新用户列表nusers=users.filter((user)=>user.socketID!==socket.id);n//console.log(users);n//发送用户列表到客户端nsocketIO.emit(&39;,users);nsocket.disconnect();n});n});n

当有新用户加入聊天应用，socket.on(&34;)就会被触发。用户的详细信息（SocketID和用户名）保存到users数组中，并在名为newUserResponse的新事件中发送回React应用程序

在socket.io(&34;)中，当用户离开聊天应用程序时更新user数组，并触发newUserReponse事件以将更新的用户列表发送到客户端。

接下来，让我们更新用户界面ChatBar.js，来显示活跃用户列表

importReact,{useState,useEffect}from&39;;nnconstChatBar=({socket})=>{nconst[users,setUsers]=useState([]);nuseEffect(()=>{nsocket.on(&39;,(data)=>setUsers(data));n},[socket,users]);nnreturn(n<divclassName=&34;>n<h2>自由聊天</h2>nn<div>n<h4className=&34;>在线用户</h4>n<divclassName=&34;>n{users.map((user)=>(n<pkey={user.socketID}>{user.userName}</p>n))}n</div>n</div>n</div>n);n};nnexportdefaultChatBar;n

useEffecthook监听从Node.js服务器发送的响应并收集活跃用户列表。该列表被映射到视图中并实时更新

恭喜，我们已经能够从Socket.io中获取活跃用户列表。接下来，让我们学习如何向聊天应用添加一些很酷的功能

可选：自动滚动和通知有用户正在输入

在本节中，您将了解如何在收到新消息时添加自动滚动功能以及标识用户正在键入的功能

像下方代码一样更新ChatPage.js

importReact,{useEffect,useState,useRef}from&39;;nimportChatBarfrom&39;;nimportChatBodyfrom&39;;nimportChatFooterfrom&39;;nnconstChatPage=({socket})=>{nconst[messages,setMessages]=useState([]);nconst[typingStatus,setTypingStatus]=useState(&39;);nconstlastMessageRef=useRef(null);nnuseEffect(()=>{nsocket.on(&39;,(data)=>setMessages([…messages,data]));n},[socket,messages]);nnuseEffect(()=>{n//?每当消息文字变动，都会往下滚动nlastMessageRef.current?.scrollIntoView({behavior:&39;});n},[messages]);nnuseEffect(()=>{nsocket.on(&39;,(data)=>setTypingStatus(data));n},[socket]);nnreturn(n<divclassName=&34;>n<ChatBarsocket={socket}/>n<divclassName=&34;>n<ChatBodynmessages={messages}ntypingStatus={typingStatus}nlastMessageRef={lastMessageRef}/>n<ChatFootersocket={socket}/>n</div>n</div>n);n};nnexportdefaultChatPage;n

更新ChatBody组件来包含一个带有lastMessageRef的元素

importReactfrom&39;;nimport{useNavigate}from&39;;nnconstChatBody=({messages,lastMessageRef})=>{nconstnavigate=useNavigate();nnconsthandleLeaveChat=()=>{nlocalStorage.removeItem(&39;);nnavigate(&39;);nwindow.location.reload();n};nnreturn(n<>n<div>n……n{/*—在JSX代码的最底部—-*/}n<divref={lastMessageRef}/>n</div>n</>n);n};nnexportdefaultChatBody;n

从上面的代码片段来看，lastMessageRef附加到消息底部的一个div标签，它的useEffect有一个依赖项，即messages数组。因此，当消息更改时，lastMessageRef的useEffect会重新渲染。

通知其他人有用户正在输入

为了在用户输入时通知其他用户，我们将在输入框上使用JavaScriptonKeyDown事件监听器，它会触发一个向Socket.io发送消息的函数，如下所示：

importReact,{useState}from&39;;nnconstChatFooter=({socket})=>{nconst[message,setMessage]=useState(&39;);nnconsthandleTyping=()=>nsocket.emit(&39;,`${localStorage.getItem(&39;)}正在输入`);nnconsthandleSendMessage=(e)=>{ne.preventDefault();nif(message.trim()&&localStorage.getItem(&39;)){nsocket.emit(&39;,{ntext:message,nname:localStorage.getItem(&39;),nid:`${socket.id}${Math.random()}`,nsocketID:socket.id,n});n}nsetMessage(&39;);n};nreturn(n<divclassName=&34;>n<formclassName=&34;onSubmit={handleSendMessage}>n<inputntype=&34;nplaceholder=&34;nclassName=&34;nvalue={message}nonChange={(e)=>setMessage(e.target.value)}nonKeyDown={handleTyping}nn/>n<buttonclassName=&34;>发送</button>n</form>n</div>n);n};nnexportdefaultChatFooter;n

在上面的代码片段中，handleTyping函数会在用户使用input输入框键入时触发键入事件。然后，我们可以在服务器上监听typing事件，并通过另一个名为typingResponse的事件向其他用户发送包含数据的响应

socketIO.on(&39;,(socket)=>{n//console.log(`?:${socket.id}用户已连接!`);nn//监听和在控制台打印消息n//socket.on(&39;,(data)=>{n//console.log(data);n//socketIO.emit(&39;,data);n//});nnsocket.on(&39;,(data)=>socket.broadcast.emit(&39;,data));nn//监听新用户的加入n//socket.on(&39;,(data)=>{n//添加新用户到users中n//users.push(data);n//console.log(users);nn//发送用户列表到客户端n//socketIO.emit(&39;,users);n//});nn//…n});n

接下来监听ChatPage.js文件中的typingResponse事件，将数据传入ChatBody.js文件进行显示

importReact,{useEffect,useState,useRef}from&39;;nimportChatBarfrom&39;;nimportChatBodyfrom&39;;nimportChatFooterfrom&39;;nnconstChatPage=({socket})=>{n//const[messages,setMessages]=useState([]);n//const[typingStatus,setTypingStatus]=useState(&39;);n//constlastMessageRef=useRef(null);nn//useEffect(()=>{n//socket.on(&39;,(data)=>setMessages([…messages,data]));n//},[socket,messages]);nnuseEffect(()=>{n//?每当消息文字变动，都会往下滚动nlastMessageRef.current?.scrollIntoView({behavior:&39;});n},[messages]);nnuseEffect(()=>{nsocket.on(&39;,(data)=>setTypingStatus(data));n},[socket]);nnreturn(n<divclassName=&34;>n<ChatBarsocket={socket}/>n<divclassName=&34;>n<ChatBodynmessages={messages}ntypingStatus={typingStatus}nlastMessageRef={lastMessageRef}/>n<ChatFootersocket={socket}/>n</div>n</div>n);n};nnexportdefaultChatPage;n

更新ChatBody.js文件去给用户显示输入状态

<divclassName=&34;>n<p>{typingStatus}</p>n</div>n

恭喜，您创建了一个聊天应用程序！

通过添加允许用户创建私人聊天室和直接消息传递的Socket.io私人消息传递功能，使用用于用户授权和身份验证的身份验证库以及用于存储的实时数据库，随意改进应用程序。

总结

Socket.io是一个非常棒的工具，具有出色的功能，使我们能够构建高效的实时应用程序，例如体育网站、拍卖和外汇交易应用程序，当然还有通过在Web浏览器和Node.js服务器之间创建持久连接的聊天应用程序

如果你期待在Node.js中构建聊天应用程序，Socket.io可能是一个很好的选择

你可以在此处找到本教程的源代码：https://github.com/zidanDirk/socket-react-chat-app

本文原文地址：https://dev.to/novu/building-a-chat-app-with-socketio-and-react-2edj

好了，文章到这里就结束啦，如果本次分享的外汇网站官网源码分享大全最新和外汇网址问题对您有所帮助，还望关注下本站哦！

以上就是小编对于外汇网站官网源码分享大全最新？外汇网址问题和相关问题的解答了，外汇网站官网源码分享大全最新？外汇网址的问题希望对你有用！