---
# System prepended metadata
title: Node.js - Socket Server
tags: [Node.js]
---
---
tags: Node.js
---
# Node.js - Socket Server
**Demo 專案連結** : [SocketServer](http://192.168.1.136/robin98727/Socket-Server_Node-js
為了熟悉WebSocket運作，利用Node.js做出一個簡易聊天室
## 1. 目錄架構
```
Socket Server
|_____ index.html
|_____ index.js
|_____ package.json
```
## 2. Flow chart圖解
## 3. Start Write
### 環境設置
先設定package.json的資料
```jsonld=
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.15.2",
"socket.io": "^2.2.0"
}
}
```
執行`npm install`
### 程式撰寫
#### server端(index.js) :
```javascript=
//Express initializes app to be a function handler that you can supply to an HTTP server
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
//新使用者加進來
io.on('connection', function (socket) {
socket.on('add user', function (msg) {
socket.username = msg
console.log("new user:"+msg+" logged.")
io.emit('add user', {
username: socket.username
})
})
//監聽訊息是件
socket.on('chat message', function (msg) {
console.log(socket.username+":"+msg);
//發布新訊息
io.emit('chat message', {
username:socket.username,
msg:msg
})
});
//使用者離開
socket.on('disconnect', function(){
console.log(socket.username+" left")
io.emit('user left', {
username:socket.username
})
})
});
//建立 http server listen 在 port 3000
http.listen(3000, function () {
console.log('listening on *:3000');
});
```
client端(index.html):
```javascript=
Socket.IO 聊天室
//使用者輸入後的對話列表
//輸入框
```
### 程式執行
1. 執行`node index.js`
2. 網址上輸入`http://localhost:3000/`
## 4. 成果展示
1. 執行`node index.js`後，終端機上會顯示
2. 網址輸入`http://localhost:3000/`後會請使用者輸入暱稱(預設為guest)
3. 輸入暱稱後會顯示該使用者已加入聊天室，並且在server端會顯示有新的user加入
4. 使用者輸入文字後送出，會顯示在上方聊天室，並在server中顯示
5. 當有新的使用者加入時，聊天室以及server會顯示
6. 當使用者離開的時候，聊天室以及server會顯示
