socket.io如何即時通訊前端配合Node
本篇文章給大家詳細介紹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事件獲取伺服器傳送過來的內容並透過alert進行了顯示。
好的，上面沒問題下面就很好理解：
下面要實現的功能是在input輸入框中輸入東西，傳入伺服器，伺服器回傳數組，前端顯示在頁面
//當然只是為了學習功能，就不要在乎例子了
看前端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));
})})在開啟頁面後，在input輸入值，點選按鈕觸發sendFun函數，觸發自訂事件sendFunEvent並將input的value傳送到伺服器，伺服器監聽sendFunEvent事件，將資料push到陣列中，又觸發了sendFunEventCallBack事件，將陣列JSON字串化傳到前端，前端監聽sendFunEventCallBack事件，取得數組，JSON序列化，將資料循環到頁面上，這是整個流程。
開啟多個前端頁面可以進行即時更新，可以進行聊天。
【推薦學習：javascript高階教學】
#以上是socket.io如何即時通訊前端配合Node的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
nvm 怎麼刪除node
Dec 29, 2022 am 10:07 AM
nvm刪除node的方法：1、下載「nvm-setup.zip」並將其安裝在C碟；2、設定環境變量，並透過「nvm -v」指令查看版本號；3、使用「nvm install」指令安裝node；4、透過「nvm uninstall」指令刪除已安裝的node即可。
node專案中如何使用express來處理檔案的上傳
Mar 28, 2023 pm 07:28 PM
怎麼處理文件上傳？以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳，希望對大家有幫助！
Node服務怎麼進行Docker鏡像化？極致優化詳解
Oct 19, 2022 pm 07:38 PM
這段時間在開發一個騰訊文檔全品類通用的HTML 動態服務，為了方便各品類接入的生成與部署，也順應上雲的趨勢，考慮使用Docker 的方式來固定服務內容，統一進行製品版本的管理。這篇文章就將我在服務 Docker 化的過程中累積起來的優化經驗分享出來，供大家參考。
深入淺析Node的進程管理工具'pm2”
Apr 03, 2023 pm 06:02 PM
這篇文章跟大家分享Node的進程管理工具“pm2”，聊聊為什麼需要pm2、安裝和使用pm2的方法，希望對大家有幫助！
Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與
聊聊用pkg將Node.js專案打包為執行檔的方法
Dec 02, 2022 pm 09:06 PM
如何用pkg打包nodejs可執行檔？以下這篇文章跟大家介紹一下使用pkg將Node專案打包為執行檔的方法，希望對大家有幫助！
npm node gyp失敗怎麼辦
Dec 29, 2022 pm 02:42 PM
npm node gyp失敗是因為“node-gyp.js”跟“Node.js”版本不匹配，其解決辦法：1、透過“npm cache clean -f”清除node快取；2、透過“npm install -g n”安裝n模組；3、透過「n v12.21.0」指令安裝「node v12.21.0」版本即可。
使用Angular和Node進行基於令牌的身份驗證
Sep 01, 2023 pm 02:01 PM
身份驗證是任何網路應用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統以及它們與傳統登入系統的差異。在本教程結束時，您將看到一個用Angular和Node.js編寫的完整工作演示。傳統身份驗證系統在繼續基於令牌的身份驗證系統之前，讓我們先來看看傳統的身份驗證系統。使用者在登入表單中提供使用者名稱和密碼，然後點擊登入。發出請求後，透過查詢資料庫在後端驗證使用者。如果請求有效，則使用從資料庫中獲取的使用者資訊建立會話，然後在回應頭中傳回會話訊息，以便將會話ID儲存在瀏覽器中。提供用於存取應用程式中受
