---
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=
<!doctype html>
<html>
<head>
<title>Socket.IO 聊天室</title>
</head>
<body>
//使用者輸入後的對話列表
<div id="message_block">
<ul id="messages"></ul>
</div>
//輸入框
<input id="m" autocomplete="off" /><button id="send">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$(document).ready(function(){
//彈跳出視窗，要使用者輸入名稱
var name = prompt("請輸入暱稱","guest")
//如果沒有名稱，就變遊客ID
if(name=="" || name == null){
name = "guest"
}
//tell server
socket.emit("add user",name)
//監聽訊息事件
socket.on('chat message', function(data){
appendMessage(data.username+":"+data.msg)
})
socket.on('add user',function(data){
appendMessage(data.username+"已加入")
})
socket.on('user left',function(data){
appendMessage(data.username+"已離開")
})
//送出聊天內容到server
$('#send').click(function(){
var text = $('#m').val()
socket.emit('chat message', text)
//清空剛輸入的
$('#m').val('')
return false
})
$("#m").keydown(function(event){
if(event.which == 13) {
$('#send').click()
}
})
//將訊息，加入到對話列表
function appendMessage(msg) {
$('#messages').append($('<li>').text(msg))
var message = document.getElementById("message_block")
message.scrollTop = message.scrollHeight
}
})
</script>
</body>
</html>
```
### 程式執行
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會顯示
Sign in with Wallet
Connect another wallet