ホームページ >ウェブフロントエンド >jsチュートリアル >Socket.io のインスタント メッセージング フロントエンドが Node とどのように連携するか
Socket.io のインスタント メッセージング フロントエンドが Node とどのように連携するか
- 醉折花枝作酒筹転載
- 2021-04-23 09:16:491854ブラウズ
この記事では、socket.io インスタント メッセージング フロントエンドの Node と連携する方法について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
まずはエフェクトを見てみましょう。ははは、まだ小さいですね
まず、
新しいフォルダーを作成する必要があります
そして、package.json ファイルをすばやく生成します
npm init -y //生成一个package.json
npm i express npm i socket.io
新しいserverRoom.jsファイルを作成します
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)})現在のファイルの場所にCmdを実行します
node serverRoom.js //或者使用 快速更新serverRoom.js的变化 同步到当前打开的服务器 //可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎 nodemon serverRoom.js
正常に開始します
をブラウザで見ても問題ありません。次に、serverRoom.js
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')})フロントエンド html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 通过script的方式引入 soctke.io -->
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<!-- 为了操作dom方便我也引入了jq -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<title>myWebsocket</title></head><body>
<p class="myBox">
<input class="inp" type="text"> <button onclick="sendFun()">点我</button>
</p>
<script>
//页面打开自动链接 http://localhost:3000 后端服务
let mySocket = io("http://localhost:3000") //直接写后端服务地址
//一直在监听webEvent 这个事件
mySocket.on('webEvent', (res) => {
window.alert(res)
})
//获取input的输入内容//将来传给服务器
function sendFun() {
console.log($('.myBox>.inp').val())
}
</script></body></html>サービスを開始すると、フロントエンド ページが自動的にバックエンド サービスにリンクされ、リンクが作成されます。 webEvent イベントが正常にトリガーされます (名前は自分で定義できます)。フロントとバックは統一する必要があります)、フロントエンドは webEvent イベントをリッスンしてサーバーから送信されたコンテンツを取得し、アラートを通じて表示します。
わかりました、上記は問題なく、以下は理解しやすいです:
以下で実装する関数は、入力入力ボックスに何かを入力し、それをサーバーに渡すことです。サーバーは配列を返し、フロントエンドはそれを Page
//もちろん関数を学ぶためだけなので、例は気にしないでください
フロントエンドの HTML を見てください
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 通过script的方式引入 soctke.io -->
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<!-- 为了操作dom方便我也引入了jq -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<title>myWebsocket</title></head><body>
<p class="myBox">
<input class="inp" type="text"> <button onclick="sendFun()">点我</button>
<p class="myBoxChild"></p>
</p>
<script>
//页面打开自动链接 http://localhost:3000 后端服务
let mySocket = io("http://localhost:3000") //直接写后端服务地址
//一直在监听webEvent 这个事件
mySocket.on('webEvent', (res) => {
window.alert(res)
})
mySocket.on('sendFunEventCallBack', (res) => {
console.log(res, 'sendFunEventCallBackRes')
let data = JSON.parse(res)
let str = ''
for (let i = 0; i < data.length; i++) {
str += `<p>${data[i]}</p>`
}
$('.myBoxChild')[0].innerHTML = str })
//获取input的输入内容//将来传给服务器
function sendFun() {
if ($('.myBox>.inp').val() != '') {
mySocket.emit('sendFunEvent', $('.myBox>.inp').val())
$('.myBox>.inp')[0].value = ''
} else {
alert('输入字符')
return
}
}
</script></body></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)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);let arr=['恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000']io.on('connect',(websocketObj)=>{ //connect 固定的
//链接成功后立即触发webEvent事件
websocketObj.emit('webEvent',JSON.stringify(arr));
//监听前端触发的 sendFunEvent 事件
websocketObj.on('sendFunEvent',(webres)=>{
arr.push(webres)
//触发所以的 sendFunEventCallBack 事件 让前端监听
io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
})})ページを開いたら、入力に値を入力し、ボタンをクリックしてsendFun関数をトリガーし、カスタムイベントsendFunEventをトリガーして、入力値をサーバーに送信します。サーバーは sendFunEvent イベントをリッスンし、データを配列にプッシュし、sendFunEventCallBack イベントをトリガーして、配列を JSON 文字列として渡します。フロントエンドに、フロントエンドは sendFunEventCallBack イベントをリッスンし、配列を取得し、JSON をシリアル化し、データをページにループします。これがプロセス全体です。
リアルタイムの更新やチャットのために複数のフロントエンド ページを開いてください。
[推奨学習: JavaScript 上級チュートリアル]
以上がSocket.io のインスタント メッセージング フロントエンドが Node とどのように連携するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。