提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

websocket

WebSocket
2023-09-27 14:25:55 时间

server端


var WebSocket = require('ws');
var WebSocketServer = WebSocket.Server,
	wss = new WebSocketServer({port: 8181});
var uuid = require('node-uuid');
var clients = [];


function wsSend(type, client_uuid, nickname, message) {
	for(var i=0; i<clients.length; i++) {
		var clientSocket = clients[i].ws;
		if(clientSocket.readyState === WebSocket.OPEN) {
			clientSocket.send(JSON.stringify({
				"type": type,
				"id": client_uuid,
				"nickname": nickname,
				"message": message
			}));
		}
	}
}


var clientIndex = 1;

wss.on('connection', function(ws) {
	var client_uuid = uuid.v4();
	var nickname = "AnonymousUser"+clientIndex;
	clientIndex+=1;
	clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});
	
	console.log('client [%s] connected', client_uuid);
	var connect_message = nickname + " has connected";
	wsSend("notification", client_uuid, nickname, connect_message);

	ws.on('message', function(message) {
		if(message.indexOf('/nick') === 0) {
			var nickname_array = message.split(' ');
			if(nickname_array.length >= 2) {
				var old_nickname = nickname;
				nickname = nickname_array[1];
				var nickname_message = "Client "+old_nickname+" changed to "+nickname;
				wsSend("nick_update", client_uuid, nickname, nickname_message);
			}
		} else {
			wsSend("message", client_uuid, nickname, message);
		}
	});

	var closeSocket = function(customMessage) {
		for(var i=0; i<clients.length; i++) {
			if(clients[i].id == client_uuid) {
				var disconnect_message;
				if(customMessage) {
					disconnect_message = customMessage;
				} else {
					disconnect_message = nickname + " has disconnected";
				}

				wsSend("notification", client_uuid, nickname, disconnect_message);
				clients.splice(i, 1);
			}
		}
	}

	ws.on('close', function() {
		closeSocket();
	});

	process.on('SIGINT', function() {
		console.log("Closing things");
		closeSocket('Server has disconnected');
		process.exit();
	});
});



客户端


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bi-directional WebSocket Chat Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-css">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-theme">
<script src="http://bit.ly/cdn-bootstrap-jq"></script>

<script>
	var ws = new WebSocket("ws://10.0.100.22:8181");
	var nickname = "";

	ws.onopen = function(e) {
		console.log('Connection to server opened');
	}

	function appendLog(type, nickname, message) {
		var messages = document.getElementById('messages');
		var messageElem = document.createElement("li");
		var preface_label;
		if(type==='notification') {
			preface_label = "<span class=\"label label-info\">*</span>";
		} else if(type=='nick_update') {
			preface_label = "<span class=\"label label-warning\">*</span>";
		} else {
			preface_label = "<span class=\"label label-success\">"
		+ nickname + "</span>";
		}

		var message_text = "<h2>" + preface_label + "  "
		+ message + "</h2>";
		messageElem.innerHTML = message_text;
		messages.appendChild(messageElem);
	}

	ws.onmessage = function(e) {
		var data = JSON.parse(e.data);
		nickname = data.nickname;
		appendLog(data.type, data.nickname, data.message);
		console.log("ID: [%s] = %s", data.id, data.message);
	}

	ws.onclose = function(e) {
		appendLog("Connection closed");
		console.log("Connection closed");
	}

	function sendMessage() {
		var messageField = document.getElementById('message');
		if(ws.readyState === WebSocket.OPEN) {
		ws.send(messageField.value);
		}
		messageField.value = '';
		messageField.focus();
	}

	function disconnect() {
	ws.close();
	}
</script>


</head>
	<body lang="en">
		<div class="vertical-center">
		<div class="container">
		<ul id="messages" class="list-unstyled">
		</ul>
		<hr />

		<form role="form" id="chat_form" οnsubmit="sendMessage(); return false;">
			<div class="form-group">
			<input class="form-control" type="text" id="message" name="message"
			placeholder="Type text to echo in here" value="" autofocus/>
			</div>
			<button type="button" id="send" class="btn btn-primary"
			οnclick="sendMessage();">Send Message</button>
		</form>
		
		</div>
		</div>
		<script src="http://bit.ly/cdn-bootstrap-minjs"></script>
	</body>
</html>


相关文章