溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Nodejs+Socket.io實(shí)現(xiàn)通訊實(shí)例代碼

發(fā)布時(shí)間：2020-10-16 15:50:10 來源：腳本之家 閱讀：138 作者：leslie·Zhao 欄目：web開發(fā)

目錄結(jié)構(gòu)

D:.
 │ package.json
 │ server.js
 │
 └─public
 index.html
 socket.io.js

需要的條件

  • socket.io.js 供前端界面初始化io
  • socket.io 供NodeJs端提供socket方法

socket.io.js存在于socket.io-client

socket.io存在于socket.io

演示的功能

  • 客戶端發(fā)送消息給服務(wù)端
  • 后端觸發(fā)事件告知客戶端
  • 客戶端離開觸發(fā)服務(wù)端事件

服務(wù)端

server.js

var express = require('express'); 
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.use('/', express.static(__dirname + '/public')); 

server.listen(80);

//socket部分
io.on('connection', function(socket) {
  //接收并處理客戶端的hi事件
  socket.on('hi', function(data) {
    console.log(data);

    //觸發(fā)客戶端事件c_hi
    socket.emit('c_hi','hello too!')
  })

  //斷開事件
  socket.on('disconnect', function(data) {
    console.log('斷開',data)
    socket.emit('c_leave','離開');
    //socket.broadcast用于向整個(gè)網(wǎng)絡(luò)廣播(除自己之外)
    //socket.broadcast.emit('c_leave','某某人離開了')
  })

});
  • connection用來處理socket鏈接事件
  • disconnect處理連接斷開事件
  • 后端接受前端事件通過socket.on(EventName,function(date){})
  • 后端觸發(fā)前端事件通過socket.emit(EventName,msg)

這個(gè)后端演示了,前端發(fā)送消息給后端，觸發(fā)hi事件，hi事件通過回調(diào)在觸發(fā)客戶端定義的c_hi事件告知前端。

客戶端

index.html

<!DOCTYPE html>
<html>

<head>
  <title>socket</title>
</head>

<body>


<button id="sendBtn">發(fā)送消息</button>

<button id="leaveBtn">離開</button>

</body>
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
  var socket=io.connect('localhost:80'),//與服務(wù)器進(jìn)行連接
    send=document.getElementById('sendBtn'),
    leave=document.getElementById('leaveBtn');

  send.onclick=function(){
    socket.emit('hi', 'hello!');
  }

  leave.onclick=function(){
    window.location.href="about:blank" rel="external nofollow" ;
    window.close()
    socket.emit('leave', 'leave');
  }

  //接收來自服務(wù)端的信息事件c_hi
  socket.on('c_hi',function(msg){
    alert(msg)
  })

  // socket.on('c_leave',function(msg){
  //   alert(msg)
  // })

</script>

</html>

Nodejs+Socket.io實(shí)現(xiàn)通訊實(shí)例代碼

  • 發(fā)送消息按鈕用來給服務(wù)端發(fā)送信息，觸發(fā)服務(wù)端定義的hi事件。
  • 離開頁面按鈕用來離開頁面，也就是socket會(huì)自動(dòng)斷開。觸發(fā)服務(wù)端定義的disconnect。

源碼下載：Socket_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手