이 글에서는 Node.js와 협력하는 Socket.io 인스턴트 메시징 프런트엔드 방법에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
우선 효과를 보세요. 하하하 아직 너무 작습니다
먼저
새 폴더를 만들고
빠르게 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')})front-end 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 이벤트는 서버에서 전송된 콘텐츠를 가져와서 경고를 통해 표시합니다.
좋아요, 위의 내용은 괜찮고 다음은 이해하기 쉽습니다.
아래에서 구현할 함수는 입력 입력 상자에 무언가를 입력하고 이를 서버에 전달하면 서버가 배열을 반환하고 프런트 엔드는 페이지에 표시됩니다
//물론 함수를 배우려면 예제에 신경쓰지 마세요
프론트엔드 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>Server-side
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
