摘要：本文實(shí)際為翻譯官方教程開始吧，我們做個(gè)聊天應(yīng)用在這個(gè)教程里，我們將制作一個(gè)簡單的網(wǎng)頁聊天應(yīng)用。它機(jī)會(huì)不要求你有任何關(guān)于或的基礎(chǔ)，所以這份教程適合任何水平的開發(fā)者。介紹曾經(jīng)寫一個(gè)網(wǎng)頁聊天應(yīng)用可能會(huì)用到網(wǎng)頁工具套件，那時(shí)候非常困難。

本文實(shí)際為翻譯Socket.io官方教程——《Get Started: Chat application》

在這個(gè)教程里，我們將制作一個(gè)簡單的網(wǎng)頁聊天應(yīng)用。它機(jī)會(huì)不要求你有任何關(guān)于Node.js或Socket.io的基礎(chǔ)，所以這份教程適合任何水平的開發(fā)者。先看看Demo。

曾經(jīng)寫一個(gè)網(wǎng)頁聊天應(yīng)用可能會(huì)用到網(wǎng)頁工具套件LAMP、PHP，那時(shí)候非常困難。因?yàn)榭蛻舳艘粩嗟叵穹?wù)器發(fā)送請(qǐng)求，查看是否有信息變化，體驗(yàn)起來非常慢。

Socket通信是傳統(tǒng)解決實(shí)時(shí)通訊的一種方案，它提供了服務(wù)器和客戶端之間的雙向通信。

這就意味著，服務(wù)器可以把消息推送給客戶端，無論何時(shí)你發(fā)送了一個(gè)消息，客戶端都能接受到你的消息，并將它推送給其他連接的用戶。

我們的第一個(gè)目標(biāo)是建立起一個(gè)簡單的HTML頁面（提供一個(gè)提交輸入信息的Form表單，和一個(gè)對(duì)話的列表）。我還還將通過Node.js的web框架express。首先，我們需要保證電腦已經(jīng)安裝了Node.js（如何安裝Node）。

第一步，我們先創(chuàng)建一個(gè)package.json文件，它用來描述這個(gè)項(xiàng)目。我推薦你把它放在一個(gè)新建的空文件夾內(nèi)。（我把我新建的文件夾名叫做chat-example.）

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

現(xiàn)在，為了簡單的package.json中的dependencies（依賴），我們將使用npm install --save命令。

npm install --save [email protected]

現(xiàn)在，我們已經(jīng)裝好了express，接下來，我們創(chuàng)建一個(gè)新的文件index.js來當(dāng)做我們的服務(wù)器端文件。

var app = require("express")();
var http = require("http").Server(app);

app.get("/", function(req, res){
  res.send("
Hello world
");
});

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

這三段代碼可以解釋為：

Express初始化了app，讓它充當(dāng)一個(gè)HTTP服務(wù)器。

我們定義了一個(gè)路由處理器／，當(dāng)我們輸入網(wǎng)址的時(shí)候，它進(jìn)入到文件根目錄。

我們讓HTTP服務(wù)器監(jiān)聽3000端口
這時(shí)，如果你輸入
node index.js
你將會(huì)看到

如果你在瀏覽器中輸入

http://localhost:3000

到目前為止，我們index.js中用了res.send來傳遞了一段HTML字符串，如果我們將整段HTML代碼用這樣的方式傳遞，會(huì)顯得很奇怪，所以我們將創(chuàng)建index.html并傳遞它

我們用sendFile重新寫一下路由處理器

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

并創(chuàng)建index.html

  
  



  

  

    
    Send
  

如果你重啟了這個(gè)進(jìn)程（按Ctrl/Cmd + C再輸入node index.js），刷新頁面就可以看到：

Socket.io由兩部分組成：

一個(gè)Node.js HTTP服務(wù)器的應(yīng)用socket.io（此處原文為：A server that integrates with (or mounts on) the Node.JS HTTP Server: socket.io）

一個(gè)客戶端的js庫socket.io-client
我們只需安裝一個(gè)模塊就可以來使用：
npm install --save socket.io

這樣會(huì)自動(dòng)保存dependency到package.json?，F(xiàn)在，我們開始編輯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");

});
注意到，我通過傳遞了http對(duì)象（HTTP服務(wù)器）新建了一個(gè)socket.io實(shí)例，接著，我對(duì)傳遞進(jìn)來的套接字（socket），監(jiān)聽connection事件，并將事件答應(yīng)到console。

現(xiàn)在在index.html中，我在添加了如下語句：

這會(huì)讓網(wǎng)頁加載socket.io-client，它會(huì)暴露一個(gè)io全局對(duì)象，并連接socket。

注意：當(dāng)我調(diào)用io()時(shí)，我沒有特別聲明任何url。因?yàn)樗J(rèn)連接這個(gè)頁面的host服務(wù)器。

如果你重現(xiàn)啟動(dòng)服務(wù)器，你將會(huì)看到console輸出“a user connected”。多打開幾個(gè)頁面，你將會(huì)看到：

每個(gè)socket同樣會(huì)觸發(fā)disconnect事件：

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

這樣你刷新網(wǎng)頁的多次，你就會(huì)看到：

Socket.IO背后最主要的作用時(shí)可以讓服務(wù)器和客戶端發(fā)送和接受事件觸發(fā)，任何能被編輯成JSON或二進(jìn)制的對(duì)象都可以傳遞。

我們先來實(shí)現(xiàn)這種情況：用戶輸入信息，服務(wù)器端接收到chat message事件，這是index.html中的script應(yīng)該這樣寫：

在index.js，我們輸出chat message事件：

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

下一個(gè)目標(biāo)就是由服務(wù)器觸發(fā)每一個(gè)客戶端的事件

為了給每個(gè)客戶端發(fā)送時(shí)間，Socket.io提供了io.emit：

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

如果你想給每個(gè)人發(fā)送消息，出了某個(gè)特定的socket連接，我們可以用boardcast標(biāo)示符：

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

在我們這個(gè)項(xiàng)目中，為了簡便，我們給每個(gè)連接的用戶都發(fā)送消息

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

在客戶端這一側(cè)，當(dāng)我們捕獲到了chat message事件，我們將它體現(xiàn)在頁面中，所有的JavaScript如下：

這時(shí)我們就完成了我們的聊天應(yīng)用，僅僅只有20行代碼?。?！

當(dāng)然，學(xué)好前端，你還需要關(guān)注一個(gè)公眾號(hào)！——每日前端
各位兄弟姐妹，共勉！