websocket+node实现一个最简单的即时通信功能

拼搏现实的明天。 2022-05-24 06:11 231阅读 0赞

http与websocket区别：

http协议请求只能由客户端向服务端发起请求才能获取最新的状态，因此为了保持最新状态，客户端需要不间断的定期请求服务器，即所谓的“轮询”，相对于这种耗费资源的协议，webscoket实现了双向发送信息，即服务器可以向客户端主动推送消息，客户端也可以向服务器主动推送消息，从而不必为了保持最新消息的获取而不断的轮询。

在即时通信中，用户A与用户B之间的通信的信息传递必须通过服务器进行，如果使用http协议，当用户A给用户B发发送信息时，A的信息先到达服务器，B的客户端如果要获取A的即时信息，需要不断的向服务器请求判断A是否发消息来了，直到请求到最新消息B的客户端才会接收到；如果使用websocket协议，当A的消息发送给服务器之后，服务器会主动把A的最新消息推送给B的客户端，B的客户端可以直接收到消息而不需要不断地请求服务器。

HTML5提供了websocket通信的API，可以用来做客户端；

node的ws模块提供的websocket的通信功能可以用来开发服务端；

先看代码：

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>您有新消息（1）</title>
    </head>
    <body>
    	<div>
    		<ul class="msgs">
    			<li>消息内容</li>
    		</ul>
    		<div>
    			<input type="text" name="" class="con">
    		</div>
    	</div>
    	<script type="text/javascript">
    		var ul = document.querySelector('.msgs');
    		var input = document.querySelector('.con');
    		//连接服务器
    		var ws = new WebSocket("ws://localhost:8003");
    		//连接成功触发
    		ws.onopen = function(){
    			alert("连接成功");
    		}
    		//连接失败触发
    		ws.onerror = function(){
    			alert("连接失败");
    		}
    		//接收消息触发
    		ws.onmessage = function(msg){
    			add(msg.data);
    		}
    		//添加内容
    		input.onkeydown = function(e){
    			if(e.keyCode == 13){
    				// add(this.value);
    				ws.send(this.value);
    			}
    		}
    		function add(con){
    			var li = document.createElement("li");
    				li.innerHTML = con;
    				ul.appendChild(li);
    				input.value = "";
    		}
    	</script>
    </body>
    </html>

node\_server.js:

实现功能：

运行node node\_server.js

当用户打开该页面，立即建立了跟后端的通信通道；

当用户在input框中输入文本并回车时，文本数据传到后端；

后端将任何一个用户发送的数据广播到打开该客户端每一个用户的客户端（该网页）上，客户端获取后端发送来的数据后展示在页面上。

工具：

安装node以及相应的ws模块。

代码地址：https://github.com/RidingACodeToStray/node\_websocket