碼上快樂

相關內容    簡體    繁體

Socket.IO學習之基礎入門

本文轉載自   查看原文   2017-07-24 00:33   1699    Node.js

原文：http://blog.csdn.net/weichuang_1/article/details/48831957

 

這里貼出Socket.IO官網

一.Socket.IO的介紹

Socket.IO支持及時、雙向與基於事件的交流。它可以在每個平台、每個瀏覽器和每個設備上工作，可靠性和速度同樣穩定。

  • 實時分析：將數據推送到客戶端，這些客戶端會被表示為實時計數器，圖表或日志客戶。
  • 實時通信和聊天：只需幾行代碼便可寫成一個Socket.IO的”Hello,World”聊天應用。
  • 二進制流傳輸：從1.0版本開始，Socket.IO支持任何形式的二進制文件傳輸，例如：圖片，視頻，音頻等。
  • 文檔合並：允許多個用戶同時編輯一個文檔，並且能夠看到每個用戶做出的修改。

官方上提供了三個demo：多人聊天室、多人玩游戲、遠程控制電腦。大家可以去官網試一試。

二.寫一個聊天應用

在這個教程中，我們將創建一個基本的聊天應用，它基本不需要你擁有一點的Node.js或者Socket.IO的知識，所以它適合所有級別的開發者。

1.介紹：

使用流行的web應用程序棧，例如LAMP (PHP)，寫一個聊天應用是非常困難的。它會涉及到輪詢服務器的更改，跟蹤時間戳，並且它運行的比較慢。

套接字通常支撐着大多數實時聊天系統的架構，提供了在服務器和客戶端之間雙向通信的通道。

這意味着服務器可以向客戶端推送消息，無論你何時寫一個聊天消息，主意就是服務器將會得到這個消息，並將這個消息推送給連接到服務器的其他客戶端。

2.web框架

第一步是搭建一個簡單的HTML網頁，該網頁提供了一個表單和一系列消息。我們將使用node.js的web框架Express，確保Node.js已經被安裝了。

首先創建一個package.json文件，來描述我們的工程，我建議你把它放在一個空的目錄中(我叫它chat-example)，

{
  "name": "socket-chat-example", "version": "1.0.0", "description": "my first socket.io app", "main": "index.js", "scripts": { "test": "start index.js" }, "author": "", "license": "ISC" }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

現在，為了將我們需要的東西安裝在依賴項中，我們使用這個命令：

npm install --save
  • 1
  • 1

現在，我們安裝一下Express：

$ npm install --save express
  • 1
  • 1

既然express已經被安裝好了，我們可以創建一個index.js文件來來設置應用。

var app = require('express')(); var http = require('http').Server(app); app.get('/', function(req, res){ res.send('<h1>Hello world</h1>'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

這將會做三件事件：

  • Express將app初始化成一個函數處理器，你可以將其提供給一個HTTP服務器(看第二行)
  • 我們定義一個路由處理器，當我們訪問網站主頁時，這個處理器就會被調用。
  • 我們讓這個http服務器監聽3000端口。

如果你運行node index.js，你會看到下面的圖示：

3.提供HTML

到目前為止，在index.js文件中，我們調用了res.send()這個方法，並將HTML類型的字符串傳遞給它。如果把整個應用的HTML放在那兒的話，我們的代碼看起來會非常奇怪。相反，我們將會創建一個index.html文件，並提供它。

我們使用sendFile()方法來重構路由處理器：

app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

使用以下的代碼來填寫index.html文件：

<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

如果你重啟這個進程，然后重新刷新頁面，看起來是這樣的：

4.集成Socket.IO

Socket.IO由兩部分構成：

  • socket.io：一個服務器，集成了Node.JS的HTTP服務器
  • socket.io-client：一個客戶端庫，在瀏覽器端加載

在開發期間，socket.io會自動為我們提供客戶端，所以現在我們只需安裝一個模塊：

npm install --save socket.io
  • 1
  • 1

這個命令會安裝socket.io模塊，並將依賴項添加到package.json文件中，現在我們在index.js添加一些代碼：

var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); io.on('connection', function(socket){ console.log('a user connected'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

注意到，我傳遞了一個http(HTTP Server)對象來創建一個新的socket.io實例，然后，為即將來到的套接字監聽connection事件，我會將其打印到控制台中。

現在，我在index.html文件中，在</body>之前添加了以下的代碼段：

<script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

上面的代碼段會加載socket.io-client，它暴露了io這個全局變量，然后進行連接。

注意到，我在調用io()的時候，並沒有聲明任何URL，因為它默認是嘗試連接提供網頁的主機。

如果你現在重新加載服務器和網頁，你會發現控制台會打印“a user connected”。盡力打開幾個標簽，你會發現控制台會打印出多個消息。

每個socket也會發射特殊的disconnect事件：

io.on('connection', function(socket){ console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

如果你多次刷新一個標簽的話，你會馬上看到：

5.發射事件

Socket.IO背后的思想是你可以發射和接收你想要的任何事件，攜帶你想要的任何數據。任何能夠被轉換成JSON的對象都能這樣做，包括二進制數據。

讓我們實現一個效果，當用戶輸入一條消息時，服務器會把它當作是一個chat message事件，index.html中script(腳本)部分應當是這樣了：

在index.js中，我們打印出chat message事件：

io.on('connection', function(socket){ socket.on('chat message', function(msg){ console.log('message: ' + msg); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

6.廣播

接下來我們打算使用服務器來向其他的客戶端發射事件，為了能夠向每個人都發射事件，Socket.IO為我們提供了io.emit()方法：

io.emit('some event', { for: 'everyone' });
  • 1
  • 1

如果你想要發送消息給每個人，除了某個特定的套接字，我們有broadcast標識：

io.on('connection', function(socket){ socket.broadcast.emit('hi'); });
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

這個例子中，為了簡潔性，我們將把消息發送給任何人，包括發送的客戶端：

io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

在客戶端，當捕獲到chat message事件的時候，我們會將它展示在頁面上，整個客戶端的JavaScript代碼如下面所示：

<script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

至此，我們的聊天應用已經完成了，大約20多行代碼。

你可以在這里獲得源代碼。

$ git clone https://github.com/guille/chat-example.git


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 socket.io入門整理 socket.io 入門篇（一） socket.io 入門篇（二） socket.io快速入門案例 socket.io 入門篇（三） socket.io，理解socket.io SOCKET.IO，理解SOCKET.IO socket.io，理解socket.io websocket與socket.io socket.io
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM