WebSocket简单入门,js连接服务器代码实现(清晰)

最新推荐文章于 2024-07-29 07:27:12 发布

Hellooorld

最新推荐文章于 2024-07-29 07:27:12 发布

阅读量6.5k

点赞数 1

分类专栏：服务器

本文链接：https://blog.csdn.net/qq_32736999/article/details/93858460

版权

服务器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、为什么需要 WebSocket？

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

二、简介

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

在这里插入图片描述

其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

在这里插入图片描述

三客户端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1 style="color: red;"> Hello</h1>
		<script type="text/javascript">
			
				var ws = new WebSocket("ws://isec-hdp01:1111");
				
				ws.onopen = function(evt) {
					console.log("Connection open ...");
					ws.send("Hello WebSockets!");
				};
				
				ws.onmessage = function(evt) {
					console.log("Received Message: " + evt.data);
				};
				
				<!--这里为了模拟实时接收服务器的代码 所以把close注释了 -->
				// ws.onclose = function(evt) {
				// 	console.log("Connection closed.");
				// };
			
			
		</script>
	</body>
	
	
</html>

四服务器代码

js为例子

#!/bin/bash

echo 1111
sleep 1
echo 2
sleep 1
echo 3
~     
每s向前端页面发送一个数字
执行:
   websocketd --port=1111 bash counter.sh

效果如下:
在这里插入图片描述

五测试打开浏览器

在这里插入图片描述

可以看到,每s都在增加数据

ls 例子

1 命令:websocketd --port 8012 ls
2 前端页面js里面的端口换成8012 
3 重新打开浏览器
4 查看下图结果,所有文件都显示出来了.

在这里插入图片描述
这只是一个简单的小demo.在开发过程中,很有可能遇到前台监控服务器上某个进程的需求,我再开发中遇到了实时监控kafka的数据是否正确,使用py脚本写了个kafka消费者,将其数据传送给前端页面渲染,可以实时查看,很棒…希望可以帮助到你.

Hellooorld

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
WebSocket简单入门,js连接服务器代码实现(清晰)

一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服...
复制链接

扫一扫