socket.io 官方文檔翻譯1

原文地址：（https://socket.io/get-started/chat/）

開始：聊天應(yīng)用

在本指南中, 我們將創(chuàng)建一個(gè)基本的聊天應(yīng)用。它幾乎不需要基本的node.js 或socket.i相關(guān)的知識(shí), 所以它是所有知識(shí)級(jí)別的用戶的理想選擇。

介紹

傳統(tǒng)上，使用流行的Web應(yīng)用程序堆棧（如LAMP，PHP）編寫聊天應(yīng)用程序非常困難。它涉及到輪詢服務(wù)器的更改，跟蹤時(shí)間戳，而且比預(yù)期慢很多。

socket一直是大多數(shù)實(shí)時(shí)聊天系統(tǒng)架構(gòu)的解決方案，其提供了客戶端與服務(wù)器之間的雙向通信通道。

這意味著服務(wù)器可以將消息推送到客戶端。任何時(shí)候你發(fā)出一個(gè)聊天信息，服務(wù)器將獲取到它后就會(huì)把信息推送給所有其他連接的客戶端。

web框架

首先我們需要有一個(gè)簡單的HTML頁面，提供表單和消息列表。為此，我們將使用Node.JS Web框架。確保你已安裝Node.JS。

首先讓我們創(chuàng)建一個(gè)描述我們項(xiàng)目的package.json清單文件。我建議你把它放在一個(gè)專用的空目錄中（我的目錄是chat-example）。

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

現(xiàn)在，為了方便地用我們需要的東西填充依賴關(guān)系，我們將使用npm install --save：

npm install --save express@4.15.2

現(xiàn)在, 安裝完express后, 我們可以創(chuàng)建一個(gè)index.js文件來啟動(dòng)我們的應(yīng)用程序。

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

這將轉(zhuǎn)換為以下內(nèi)容:
1.Express 初始話app為一個(gè)函數(shù)處理器，你可以提供用它來提供 HTTP 服務(wù)(如2行所示)。
2.我們定義了一個(gè)路由/，當(dāng)我們點(diǎn)擊網(wǎng)站首頁時(shí)這是函數(shù)就會(huì)被調(diào)用。
3.我們讓 http 服務(wù)器監(jiān)聽端口3000。
如果運(yùn)行節(jié)點(diǎn)index.js, 您應(yīng)該看到以下內(nèi)容:

image

如果您將瀏覽器指向 http://localhost:3000:

HTML服務(wù)

到目前為止,在index.js中我們調(diào)用res.send傳遞一個(gè) HTML 字符串。如果我們把整個(gè)應(yīng)用程序的 HTML 放在那里, 我們的代碼看起來會(huì)非常混亂。因此， 我們創(chuàng)建一個(gè)index.html 文件來提供html服務(wù)。

現(xiàn)在我們用sendFile來重構(gòu)我們的路由處理器：

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

在index.html文件中編寫如下的內(nèi)容：

<!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>

如果你現(xiàn)在重啟服務(wù)（點(diǎn)擊ctrl+c 然后再次運(yùn)行 node index）并刷新頁面，你應(yīng)該看到如下頁面：
image

集成Socket.IO

Socket.IO由兩部分組成：
*集成或則安裝在Node.JS http服務(wù)上的：socket.io
*通過瀏覽器端加載的客服端庫：socket.io-client

在開發(fā)過程中, socket.io 為我們自動(dòng)扮演客服端的角色, 所以現(xiàn)在我們只需要安裝一個(gè)模塊：
npm install --save socket.io
上面的語句將安裝模塊并把依賴項(xiàng)添加到package.json中?，F(xiàn)在我們編輯index.js 添加相應(yīng)的功能:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

請(qǐng)注意，我通過傳遞http（HTTP服務(wù)器）對(duì)象來初始化一個(gè)新的socket.io實(shí)例。然后我監(jiān)聽傳入sockets的連接事件，并將其輸出到控制臺(tái)。

現(xiàn)在在index.html文件的<body>標(biāo)簽前面添加如下片段：

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

這就是加載socket.io-client所需要的全部工作，它暴露了一個(gè)全局io對(duì)象，然后連接。

請(qǐng)注意我并有沒有給出調(diào)用io的url，因?yàn)?，它默認(rèn)連接到當(dāng)前頁面的主機(jī)地址。

如果你現(xiàn)在重新加載服務(wù)和網(wǎng)站，你可以在控制臺(tái)中打印出"a user connected"

嘗試著多打開幾個(gè)tab頁面，然后你會(huì)看到幾條消息：


image

每一個(gè)socket連接都會(huì)觸發(fā)一個(gè)特殊的disconnect事件：

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
})

接下來，嘗試刷新幾遍頁面，你將看到下面的結(jié)果：


image

發(fā)送事件

Socke.IO的主要思想是你可以發(fā)送和接收你想要的任何事件，使用任何你想要的數(shù)據(jù)。任何對(duì)象都可以用JSON進(jìn)行編碼，同樣支持二進(jìn)制數(shù)據(jù)：

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

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

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

效果如下面的視頻所示：貼出地址:(https://i.cloudup.com/transcoded/zboNrGSsai.mp4)
好像我打不開

廣播

下一步我們的目標(biāo)是將事件從服務(wù)器發(fā)送到用戶。
為了將事件發(fā)送到每一個(gè)用戶，Socket.IO給我們提供了io.emit:
io.emit('some event', { for: 'everyone' });
如果你想發(fā)送一個(gè)消息給除了特定socket以外的每個(gè)人，我們有廣播標(biāo)志：

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

在這種情況下，為了簡單起見，我們會(huì)將信息發(fā)送給每個(gè)人，包括發(fā)信人。

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

在客戶端，當(dāng)我們捕獲聊天消息事件時(shí)，我們會(huì)將其包含在頁面中?？偟目蛻舳薐avaScript代碼如下：

<script>
  $(function () {
    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>

這就完成了我們的聊天應(yīng)用程序，大約有20行代碼！這是它的樣子：
(https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4)

作業(yè)

以下是改進(jìn)應(yīng)用程序的一些建議：
*當(dāng)有人連接或斷開連接時(shí)，將消息廣播給連接的用戶
*添加對(duì)昵稱的支持
*不要將相同的消息發(fā)送給自己發(fā)送的用戶。相反，只要他按下輸入，就直接追加消息。
*添加“{user}正在輸入”功能
*顯示誰在線
*添加私人消息
*分享您的改進(jìn)！

獲得這個(gè)例子
你可以在GitHub上找到它。
$ git clone https://github.com/socketio/chat-example.git

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容