基於websocket與nodejs-websocket的簡單聊天室
1.專案目錄:
- websocketChatRoom
- index.html(客戶端)
- wsServer.js(伺服器)
2.安裝nodejs-websocket(https://www.npmjs.com/package/nodejs-websocket)
- npm install nodejs-websocket
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>websocket聊天室</title>
</head>
<body>
<input id="sendTxt" type="text">
<button id="send">send</button>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:3000/");
websocket.onopen = function() {
console.log("websocket open");
// 傳送訊息放在這裡
document.getElementById("send").onclick = function() {
var txt = document.getElementById("sendTxt").value;
if (txt) {
websocket.send(txt);
}
}
}
websocket.onclose = function() {
console.log("websocket close");
}
// 只接收字串引數,所以在服務端相傳物件過來可以用JSON先轉換成字串,然後在這邊轉成物件
websocket.onmessage = function(e) {
console.log(e.data);
var mes = JSON.parse(e.data);
showMessage(mes.data, mes.type);
}
// 顯示訊息函式
function showMessage(str, type) {
var div = document.createElement('div');
if (type == "enter") {
div.style.color = "red";
} else if (type == "message") {
div.style.color = "blue";
} else if (type == "leave") {
div.style.color = "green";
}
div.innerHTML = str;
document.body.appendChild(div);
}
</script>
</body>
</html>
4.wsServer.js
var ws = require("nodejs-websocket")
const PORT = 3000;
// 每進來一個客戶端就記錄一下
var clientCount = 0;
var server = ws.createServer(function(conn) {
console.log("New connection")
clientCount++;
conn.nickname = 'user' + clientCount;
let mes = {};
mes.type = "enter";
mes.data = conn.nickname + ' comes in'
broadcast(JSON.stringify(mes));
conn.on("text", function(str) {
console.log("Received " + str);
let mes = {};
mes.type = "message";
mes.data = conn.nickname + ' says: ' + str;
broadcast(JSON.stringify(mes));
})
conn.on("close", function(code, reason) {
console.log("Connection closed");
let mes = {};
mes.type = "leave";
mes.data = conn.nickname + ' left'
broadcast(JSON.stringify(mes));
})
conn.on("error", function(err) {
console.log("handle err");
console.log(err);
})
}).listen(PORT);
console.log("websocket server running on port: " + PORT);
function broadcast(str) {
server.connections.forEach(function(connection) {
connection.sendText(str);
})
}
5.執行結果
6.注意
- index.html裡的onmessage回撥函式要接收字串作為引數,所以在服務端要用JSON轉換成字串,然後再在客戶端轉成物件!
- 這裡的實現過程都是自己寫的,可以藉助socket.io來實現,它可以傳送任何型別的資料,不僅僅是字串,而且可以自定義事件
相關文章
- 基於webapi的websocket聊天室(四)WebAPI
- play 簡單的基於websocket的echo serverWebServer
- 基於websocket的簡單廣播系統Web
- 基於 golang + vue + websocket 開發的聊天室GolangVueWeb
- 基於webapi的websocket聊天室(番外一)WebAPI
- 基於webapi的websocket聊天室(番外二)WebAPI
- 基於 flask 結合 Redis 的簡單聊天室FlaskRedis
- 用Java構建一個簡單的WebSocket聊天室JavaWeb
- 學習WebSocket(二):使用Spring WebSocket做一個簡單聊天室WebSpring
- 用node實現一個簡單的聊天室——websocket實踐Web
- 基於 WebSocket 的 PPT 遠端控制器簡單實現Web
- 基於Websocket的簡易webshell實現Webshell
- SpringBoot2 整合 WebSocket 簡單實現聊天室功能Spring BootWeb
- 簡單的websocket demoWeb
- 簡單聊聊WebSocketWeb
- Websocket簡單例子Web單例
- 用nodejs-websocket開發一個websoket服務NodeJSWeb
- 基於golang的聊天室Golang
- WebSocket於HTTP 、WebSocket與Socket的區別WebHTTP
- 學習WebSocket(一):Spring WebSocket的簡單使用WebSpring
- WebSocket 簡單瞭解Web
- websocket簡單例項Web單例
- 基於netty的聊天室Netty
- 高效簡易開發基於websocket 的通訊應用Web
- 基於express和socket.io的超簡易版聊天室Express
- Python基於Socket實現簡易多人聊天室Python
- WebSocket就是這麼簡單Web
- 微信小程式websocket聊天室微信小程式Web
- Netty版本 簡單聊天室Netty
- 基於WebSocket的modbus通訊(三)- websocket和串列埠Web串列埠
- 基於Netty實現的WebSocket聊天室--支援多人同時線上及定時心跳檢測NettyWeb
- 基於Opencv的簡單影像處理OpenCV
- 基於springmvc的easypoi簡單使用SpringMVC
- 基於LINUX的多功能聊天室Linux
- 分享一個簡單的聊天室專案
- 基於JS簡單甘特圖JS
- js WebSocket用法簡單介紹JSWeb
- WinForm的Socket實現簡單的聊天室 IMORM