websocket基础使用学习

websocket基础使用学习

一、websocket是什么?

以前,很多网站为了实现推送技术,所用的技术都是Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。即实现客服实时消息回复平台主动通知之类的功能。

二、使用步骤

1.websocket服务的安装与启动

安装服务

这里用全新的项目与文件来做demo。

新建一个空文件夹,在文件夹中运行cmd,进行npm初始化命令:npm init -y

安装服务依赖包:npm install nodejs-websocket --save

编辑服务js文件:server.js

js 复制代码
    const ws = require('nodejs-websocket');
  	const POST = 8080;

  	const server = ws.createServer(connect => {
	    connect.on("text", data => {
	      console.log("received: "+data);
	      connect.sendText(data);
	    });

	    connect.on("close", (code, reason) => {
	      console.log("connection closed!");
	    });

	    connect.on('error', ()=>{
	      console.log("connection error!");
	    });
  	});

	server.listen(POST, ()=>{
		console.log("websocket server start success!");
	});

在文件夹的cmd中启动服务:node server.js,会看到下面结果:

服务就启动好了。

连接与发消息

编写html文件,来进行连接与发消息,例如:test.html

html 复制代码
<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>测试WebSocket</title>
    
      <script type="text/javascript">
         // 打开一个 web socket
         var ws = new WebSocket("ws://127.0.0.1:8080");
            
         ws.onopen = function()
         {
            // Web Socket 已连接上,使用 send() 方法发送数据
            ws.send("发送数据");
         };
            
         ws.onmessage = function (evt) 
         { 
            var received_msg = evt.data;
         };
            
         ws.onclose = function()
         { 
            // 关闭 websocket
         };
         var i =1;
         function sendmsg(){
            ws.send("发送数据"+i++);
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
		   <a href="javascript:sendmsg()">发消息</a>
      </div>
      
   </body>
</html>

测试结果:

总结

这里就是基础使用了。

相关推荐
香蕉可乐荷包蛋2 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
许白掰28 分钟前
Linux入门篇学习——借助 U 盘或 TF 卡拷贝程序到开发板上
linux·学习·借助 u 盘拷贝程序到开发板上·借助 tf卡拷贝程序到开发板上
apihz34 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
guts°2 小时前
10-ACL技术
网络·网络协议
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
2301_780789666 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
有书Show12 小时前
个人IP的塑造方向有哪些?
网络·网络协议·tcp/ip
iFulling12 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋12 小时前
AI算法之图像识别与分类
人工智能·学习·算法
代码搬运媛12 小时前
HTTP REST API、WebSocket、 gRPC 和 GraphQL 应用场景和底层实现
websocket·http·graphql