Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Instant-Messaging-Frontend-Methode von socket.io zur Zusammenarbeit mit Node. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Schauen Sie sich zuerst den Effekt an, hahaha, er ist immer noch so klein.

Zuerst müssen wir einen neuen Ordner erstellen und schnell eine package.json-Datei generieren
in der aktuellen Datei Der Speicherort cmd

npm init -y  //生成一个package.json

wurde erfolgreich gestartet

und es gibt kein Problem, wenn Sie es im Browser überprüfen

. Als nächstes schreiben wir weiter serverRoom.js

npm i express
npm i socket.io

Front-End-HTML

const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('欢迎来到express')
    next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})

Wenn der Dienst gestartet wird, wird die Front-End-Seite automatisch mit unserem Back-End-Dienst verknüpft. Der Link löst erfolgreich das webEvent-Ereignis aus (der Name kann Sie müssen es selbst definieren und die Vorder- und Rückseite müssen vereinheitlicht werden. Die Front-End-Überwachung erfolgt. Das WebEvent-Ereignis ruft den vom Server gesendeten Inhalt ab und zeigt ihn per Warnung an.

Okay, das Obige ist in Ordnung und das Folgende ist leicht zu verstehen:

Die unten zu implementierende Funktion besteht darin, etwas in das Eingabefeld einzugeben, es an den Server zu übergeben, der Server gibt ein Array zurück und das Front-End zeigt es auf der Seite an

//Natürlich ist es nur für Um die Funktion zu lernen, machen Sie sich keine Gedanken über Beispiele

Schauen Sie sich das Front-End-HTML an

node serverRoom.js  
//或者使用  快速更新serverRoom.js的变化 同步到当前打开的服务器
//可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎
nodemon serverRoom.js

Serverseitig

const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('欢迎来到express')
    next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent','恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000')})

Geben Sie nach dem Öffnen der Seite ein Klicken Sie auf den Wert in der Eingabe, klicken Sie auf die Schaltfläche, um die sendFun-Funktion auszulösen, das benutzerdefinierte Ereignis sendFunEvent auszulösen und den Eingabewert an den Server zu übertragen. Der Server hört auf das sendFunEvent-Ereignis, schiebt die Daten in das Array, löst das sendFunEventCallBack-Ereignis aus und Übergibt die Array-JSON-Zeichenfolge an das Front-End. Das Front-End lauscht dem sendFunEventCallBack-Ereignis, ruft das Array ab, serialisiert es und leitet die Daten an die Seite weiter.

Öffnen Sie mehrere Front-End-Seiten für Echtzeit-Updates und Chat.

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

】

Das obige ist der detaillierte Inhalt vonWie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!