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

更新時間：2017年02月13日 15:50:07 作者：leslie·Zhao

本篇文章主要介紹了Nodejs+Socket.io實現(xiàn)通訊實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

目錄結構

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ā)送消息給服務端
后端觸發(fā)事件告知客戶端
客戶端離開觸發(fā)服務端事件

服務端

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用于向整個網(wǎng)絡廣播(除自己之外)
    //socket.broadcast.emit('c_leave','某某人離開了')
  })

});

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

這個后端演示了,前端發(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'),//與服務器進行連接
    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');
  }

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

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

</script>

</html>