websocket学习-持续更新

最新推荐文章于 2024-08-28 15:17:22 发布

75闪光雷

最新推荐文章于 2024-08-28 15:17:22 发布

阅读量599

点赞数 2

分类专栏： websocket

本文链接：https://blog.csdn.net/qq_34309305/article/details/76892297

版权

websocket 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

服务端nodejs

客户端js

首先，服务端代码

创建一个server.js

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

wss.on('connection',function(ws){
	var client_uuid=uuid.v4();
	var nickname=client_uuid.substr(0,8);
	clients.push({"id":client_uuid,"ws":ws,"nickname":nickname});
	console.log('client [%s] connected',client_uuid);
	ws.on('message',function(message){
		for(var i=0;i<clients.length;i++){
			var clientSocket=clients[i].ws;
			console.log('client [%s]:%s',clients[i].id,message);
			clientSocket.send(JSON.stringify({
				"id":client_uuid,
				"message":message
			}));
		}
	});


	ws.on('close',function(){
		for(var i=0;i<clients.length;i++){
			if(clients[i].id==client_uuid){
				console.log('client [%s] disconnected',client_uuid);
				clients.splice(i,1);
			}
		}
	})
})

我上面在最基础的功能上增加了用户ID。

客户端代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>websocket</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" />
<meta charset="utf-8">
</head>

<body>
<div id="header">
	
</div>
<div id="main">
    <div id="body" class="light">
    	<div id="content" class="show">          
            <div class="demo">
            	<form id="uploadForm"  enctype="multipart/form-data">
                    <div class="upload_box">
                        <div class="upload_choose">
                            <input id="message" type="text" size="30" name="fileselect[]" multiple />
                        </div>
                        <div class="upload_submit">
                            <button type="button" id="fileSubmit" class="upload_submit_btn" οnclick="sendMessage()">发送</button>
                        </div>
                        <div class="upload_choose">
                            <div id="messagebox" ></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>       
    </div>
</div>

<script src="http://libs.baidu.com/jquery/1.4.4/jquery.js"></script>

<script>
var ws =new WebSocket("ws:localhost:8181");
ws.onopen = function(e){
	console.log('connection to server opened');	
}
ws.onmessage = function(e){
	var data=JSON.parse(e.data);
	var message=document.createElement("li");
	message.innerHTML= data.message;
	document.getElementById('messagebox').appendChild(message);
}

ws.οnerrοr=function(e){
	console.log("websocket failure,error",e);
	//handleErrors(e);
}

ws.onclose=function(e){
	console.log(e.reason+""+e.code);
}

//ws.close(1000,'websocket closed');
function sendMessage(){
	ws.send($('#message').val());
}
</script>
</body>
</html>

用cmd启动服务器server.js