溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下socket.io怎么即時(shí)通信前端配合Node，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
首先我們需要
新建文件夾
并快速生成一個(gè)package.json文件
npm init -y //生成一個(gè)package.json
npm i express npm i socket.io
新建一個(gè)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('成功啟動(dòng)express服務(wù),端口號(hào)是'+port)})在當(dāng)前文件所在位置cmd
node serverRoom.js //或者使用 快速更新serverRoom.js的變化 同步到當(dāng)前打開的服務(wù)器 //可以通過 npm i nodemon -g 下載到全局 使用很是方便 不亦樂乎 nodemon serverRoom.js
成功啟動(dòng)
在瀏覽器看一下
也是沒有問題的。下面我們繼續(xù)寫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('成功啟動(dòng)express服務(wù),端口號(hào)是'+port)})//引入socket.io傳入服務(wù)器對(duì)象 讓socket.io注入到web網(wǎng)頁(yè)服務(wù)const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{ //connect 固定的
//鏈接成功后立即觸發(fā)webEvent事件
websocketObj.emit('webEvent','恭喜鏈接websocket服務(wù)成功：目前鏈接的地址為：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()">點(diǎn)我</button> </p> <script> //頁(yè)面打開自動(dòng)鏈接 http://localhost:3000 后端服務(wù) let mySocket = io("http://localhost:3000") //直接寫后端服務(wù)地址 //一直在監(jiān)聽webEvent 這個(gè)事件 mySocket.on('webEvent', (res) => { window.alert(res) }) //獲取input的輸入內(nèi)容//將來傳給服務(wù)器 function sendFun() { console.log($('.myBox>.inp').val()) } </script></body></html>
當(dāng)服務(wù)啟動(dòng)的時(shí)候，前端頁(yè)面打開會(huì)自動(dòng)鏈接我們后端服務(wù)，鏈接成功觸發(fā) webEvent 事件（名稱可以自己定義，前后得統(tǒng)一），前端監(jiān)聽webEvent事件 獲取服務(wù)器傳送過來的內(nèi)容并通過alert進(jìn)行了顯示。
好的，上面沒問題下面就也很好理解：
下面要實(shí)現(xiàn)的功能是在input輸入框中輸入東西，傳入服務(wù)器，服務(wù)器返回?cái)?shù)組，前端顯示在頁(yè)面
//當(dāng)然只是為了學(xué)習(xí)功能，就不要在乎例子了
看前端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()">點(diǎn)我</button>
<p class="myBoxChild"></p>
</p>
<script>
//頁(yè)面打開自動(dòng)鏈接 http://localhost:3000 后端服務(wù)
let mySocket = io("http://localhost:3000") //直接寫后端服務(wù)地址
//一直在監(jiān)聽webEvent 這個(gè)事件
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的輸入內(nèi)容//將來傳給服務(wù)器
function sendFun() {
if ($('.myBox>.inp').val() != '') {
mySocket.emit('sendFunEvent', $('.myBox>.inp').val())
$('.myBox>.inp')[0].value = ''
} else {
alert('輸入字符')
return
}
}
</script></body></html>服務(wù)端
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('成功啟動(dòng)express服務(wù),端口號(hào)是'+port)})//引入socket.io傳入服務(wù)器對(duì)象 讓socket.io注入到web網(wǎng)頁(yè)服務(wù)const io = require('socket.io')(server);let arr=['恭喜鏈接websocket服務(wù)成功：目前鏈接的地址為：http://127.0.0.1:3000']io.on('connect',(websocketObj)=>{ //connect 固定的
//鏈接成功后立即觸發(fā)webEvent事件
websocketObj.emit('webEvent',JSON.stringify(arr));
//監(jiān)聽前端觸發(fā)的 sendFunEvent 事件
websocketObj.on('sendFunEvent',(webres)=>{
arr.push(webres)
//觸發(fā)所以的 sendFunEventCallBack 事件 讓前端監(jiān)聽
io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
})})在打開頁(yè)面后，在input輸入值，點(diǎn)擊按鈕觸發(fā)sendFun函數(shù)，觸發(fā)自定義事件 sendFunEvent并將input的value傳送到服務(wù)器，服務(wù)器監(jiān)聽sendFunEvent事件，將數(shù)據(jù)push到數(shù)組中，又觸發(fā)了sendFunEventCallBack事件，將數(shù)組JSON字符串化傳到前端，前端監(jiān)聽sendFunEventCallBack事件，獲取數(shù)組，JSON序列化，將數(shù)據(jù)循環(huán)到頁(yè)面上，這是整個(gè)流程。
打開多個(gè)前端頁(yè)面可以進(jìn)行實(shí)時(shí)更新，可以進(jìn)行聊天。
以上是“socket.io怎么即時(shí)通信前端配合Node”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼