使用webSocket在頁面群聊
阿新 • • 發佈：2017-10-21
amp 瀏覽器 web style 美的 移除 nbsp doc element
clients.push(client);
client.on(‘message‘, (message) => {
for (var i = 0; i < clients.length; i++) {
clients[i] && clients[i].send(message);
/* 這三行代碼等價與上面的一行
if(clients[i]){
clients[i].send(message)
}*/
}
});
//如果連接出錯，把用戶移除群聊
client.on(‘error‘, () => {
clients[client.id] = null;
});
//如果用戶關閉連接，把用戶移出群聊
client.on(‘close‘, () => {
clients[client.id] = null;
});
var client = new WebSocket("ws://127.0.0.1:9000");
input = document.getElementById("input");
content = document.getElementById("content");
function handleClick() {
client.send(input.value);
}
client.onmessage = function(e){
content.innerHTML = e.data;
}
</script>
</body>
前文說Socket可以再命令行群聊，但我們希望的是用戶可以在頁面進行群聊
Websocket完美的實現了這個功能
首先，我們應該下載一個ws第三方模塊，命令是npm install ws --save如果不想添加package.json則可不寫--save
服務器代碼為
const WebSocket = require(‘ws‘);
const server = new WebSocket.Server({ port: 9000 });
const clients = [];
server.on(‘connection‘, (client) => {
client.id = clients.length;
clients.push(client);
client.on(‘message‘, (message) => {
for (var i = 0; i < clients.length; i++) {
clients[i] && clients[i].send(message);
/* 這三行代碼等價與上面的一行
if(clients[i]){
clients[i].send(message)
}*/
}
});
//如果連接出錯，把用戶移除群聊
client.on(‘error‘, () => {
clients[client.id] = null;
});
//如果用戶關閉連接，把用戶移出群聊
client.on(‘close‘, () => {
clients[client.id] = null;
});
});
HTML端代碼
<body>
<input id="input" />
<button id="button" onclick="handleClick()">提交</button>
<div id="content"></div>
<script>
//在高級瀏覽器中內置了websocket
var client = new WebSocket("ws://127.0.0.1:9000");
input = document.getElementById("input");
content = document.getElementById("content");
function handleClick() {
client.send(input.value);
}
client.onmessage = function(e){
content.innerHTML = e.data;
}
</script>
</body>
使用webSocket在頁面群聊