第一個目標是設置一個簡單的HTML網頁，用於提供表單和消息列表。我們將為此目的使用Node.JS Web框架express。確保已安裝Node.JS。
首先，讓我們創建一個package.json描述我們項目的清單文件。我建議你把它放在一個專門的空目錄中（我會打電話給我chat-example）。
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": {}}現在，為了輕鬆填充dependencies我們需要的東西，我們將使用npm install --save：
npm install --save express@4.15.2現在已經安裝了express，我們可以創建一個index.js將設置我們的應用程式的文件。
var app = require('express')();var http = require('http').createServer(app);app.get('/', function(req, res){ res.send('<h1>Hello world</h1>');});http.listen(3000, function(){ console.log('listening on *:3000');});這轉化為以下內容：
Express初始化app為可以提供給HTTP伺服器的函數處理程序（如第2行所示）。我們定義一個路由處理程序/，當我們訪問我們的網站時，它會被調用我們使http伺服器偵聽埠3000。如果你跑步，node index.js你應該看到以下內容：
如果您將瀏覽器指向http://localhost:3000：
提供HTML到目前為止，index.js我們正在調用res.send並傳遞一個HTML字符串。如果我們將整個應用程式的HTML放在那裡，我們的代碼看起來會很混亂。相反，我們將創建一個index.html文件並提供服務。
讓我們重構我們的路由處理程序來sendFile代替：
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});並填充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>如果您重新啟動該過程（通過按Ctrl + C並node index再次運行）並刷新頁面，它應如下所示：
集成Socket.IOSocket.IO由兩部分組成：
在開發過程中，socket.io正如我們所見，我們會自動為客戶服務，所以現在我們只需要安裝一個模塊：
npm install --save 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(__dirname + '/index.html');});io.on('connection', function(socket){ console.log('a user connected');});http.listen(3000, function(){ console.log('listening on *:3000');});請注意，我socket.io通過傳遞http（HTTP伺服器）對象來初始化新實例。然後我在connection事件上監聽傳入的套接字，然後將其記錄到控制臺。
現在在index.html中，我在以下內容之前添加以下代碼段</body>：
<script src="/socket.io/socket.io.js"></script><script> var socket = io();</script>這就是加載它所需的全部內容socket.io-client，它暴露了io全局（和端點GET /socket.io/socket.io.js），然後連接。
如果您想使用本地版本的客戶端JS文件，可以在以下位置找到它node_modules/socket.io-client/dist/socket.io.js。
請注意，我在調用時沒有指定任何URL io()，因為它默認嘗試連接到為頁面提供服務的主機。
如果您現在重新加載伺服器和網站，您應該看到控制臺列印「用戶已連接」。
嘗試打開幾個標籤，您會看到幾條消息：
[圖片上傳失敗...(image-bf7c81-1559199685037)]
每個插座也會觸發一個特殊disconnect事件：
io.on('connection', function(socket){ console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); });});然後，如果您多次刷新選項卡，則可以看到它的運行情況：
發出事件Socket.IO背後的主要思想是，您可以使用您想要的任何數據發送和接收您想要的任何事件。任何可以編碼為JSON的對象都可以，並且也支持二進位數據。
讓我們這樣做，以便當用戶鍵入消息時，伺服器將其作為chat message事件獲取。將script在S部件index.html現在應該如下所示：
<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(e){ e.preventDefault(); // prevents page reloading 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); });});結果應如下視頻：
廣播下一個目標是讓我們從伺服器向其他用戶發出事件。
為了向所有人發送活動，Socket.IO給了我們io.emit：
io.emit('some event', { for: 'everyone' });如果你想向除了某個套接字以外的所有人發送消息，我們有broadcast標誌：
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代碼總數達到：
<script> $(function () { var socket = io(); $('form').submit(function(e){ e.preventDefault(); // prevents page reloading socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); });</script>這完成了我們的聊天應用程式，大約20行代碼！這就是它的樣子：