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

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

在這個教程里，我們將制作一個簡單的網頁聊天應用。它機會不要求你有任何關于Node.js或Socket.io的基礎，所以這份教程適合任何水平的開發者。先看看Demo。

曾經寫一個網頁聊天應用可能會用到網頁工具套件LAMP、PHP，那時候非常困難。因為客戶端要不斷地像服務器發送請求，查看是否有信息變化，體驗起來非常慢。

Socket通信是傳統解決實時通訊的一種方案，它提供了服務器和客戶端之間的雙向通信。

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

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

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

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

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

npm install --save express@4.10.2

現在，我們已經裝好了express，接下來，我們創建一個新的文件index.js來當做我們的服務器端文件。

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，讓它充當一個HTTP服務器。

我們定義了一個路由處理器／，當我們輸入網址的時候，它進入到文件根目錄。

我們讓HTTP服務器監聽3000端口
這時，如果你輸入
node index.js
你將會看到

如果你在瀏覽器中輸入

http://localhost:3000

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

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

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

并創建index.html

  
  



  

  

    
    Send
  

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

Socket.io由兩部分組成：

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

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

這樣會自動保存dependency到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");

});
注意到，我通過傳遞了http對象（HTTP服務器）新建了一個socket.io實例，接著，我對傳遞進來的套接字（socket），監聽connection事件，并將事件答應到console。

現在在index.html中，我在添加了如下語句：

這會讓網頁加載socket.io-client，它會暴露一個io全局對象，并連接socket。

注意：當我調用io()時，我沒有特別聲明任何url。因為它默認連接這個頁面的host服務器。

如果你重現啟動服務器，你將會看到console輸出“a user connected”。多打開幾個頁面，你將會看到：

每個socket同樣會觸發disconnect事件：

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

這樣你刷新網頁的多次，你就會看到：

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

下一個目標就是由服務器觸發每一個客戶端的事件

為了給每個客戶端發送時間，Socket.io提供了io.emit：

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

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

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

在我們這個項目中，為了簡便，我們給每個連接的用戶都發送消息

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

在客戶端這一側，當我們捕獲到了chat message事件，我們將它體現在頁面中，所有的JavaScript如下：

這時我們就完成了我們的聊天應用，僅僅只有20行代碼！！！

當然，學好前端，你還需要關注一個公眾號！——每日前端
各位兄弟姐妹，共勉！