Socket.IO學習之基礎入門

時間 2019-11-29

標籤 socket.io socket 學習基礎入門欄目系統網絡简体版

原文原文鏈接

【轉載理由：適合Socket.IO入門(需nodejs express基礎)】
javascript

摘自http://blog.csdn.net/weichuang_1/article/details/48831957php

這裏貼出Socket.IO官網css

一.Socket.IO的介紹html

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

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

官方上提供了三個demo：多人聊天室、多人玩遊戲、遠程控制電腦。你們能夠去官網試一試。node

二.寫一個聊天應用git

在這個教程中，咱們將建立一個基本的聊天應用，它基本不須要你擁有一點的Node.js或者Socket.IO的知識，因此它適合全部級別的開發者。github

1.介紹：web

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

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

這意味着服務器能夠向客戶端推送消息，不管你什麼時候寫一個聊天消息，主意就是服務器將會獲得這個消息，並將這個消息推送給鏈接到服務器的其餘客戶端。

2.web框架

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

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

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 {
  "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
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
npm install --save

如今，咱們安裝一下Express：

 
 
 
 
  
  
  
  1
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
$ npm install --save express

既然express已經被安裝好了，咱們能夠建立一個index.js文件來來設置應用。

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
 
 
 
 
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');
});

這將會作三件事件：

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

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

3.提供HTML

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

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

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

使用如下的代碼來填寫index.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
 
 
 
 
<!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>

若是你重啓這個進程，而後從新刷新頁面，看起來是這樣的：

4.集成Socket.IO

Socket.IO由兩部分構成：

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

在開發期間，socket.io會自動爲咱們提供客戶端，因此如今咱們只需安裝一個模塊：

 
 
 
 
  
  
  
  1
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
npm install --save socket.io

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

 
 
 
 
  
  
  
  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
 
 
 
 
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');
});

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

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

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

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

注意到，我在調用io()的時候，並無聲明任何URL，由於它默認是嘗試鏈接提供網頁的主機。

若是你如今從新加載服務器和網頁，你會發現控制檯會打印「a user connected」。盡力打開幾個標籤，你會發現控制檯會打印出多個消息。

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

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

若是你屢次刷新一個標籤的話，你會立刻看到：

5.發射事件

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

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

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

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

6.廣播

接下來咱們打算使用服務器來向其餘的客戶端發射事件，爲了可以向每一個人都發射事件，Socket.IO爲咱們提供了io.emit()方法：

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

若是你想要發送消息給每一個人，除了某個特定的套接字，咱們有broadcast標識：

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

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

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

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

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
<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>

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

你能夠在這裏得到源代碼。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。