WebSocket的基本使用

1、WebSocket 是一种网络协议,用于在客户端和服务器之间进行双向通信。它允许在一个单独的 TCP 连接上进行全双工通信,因此比传统的 HTTP 请求-响应模型更高效。

1.1、WebSocket 协议通过在 HTTP 握手期间建立握手协议升级机制来启动连接。一旦建立连接,客户端和服务器可以在任何时候向对方发送数据。与传统的 HTTP 连接不同,WebSocket 连接保持打开状态,直到其中一方关闭连接或网络错误导致连接中断。

1.2、WebSocket 可以用于实时 Web 应用程序、多人在线游戏、聊天应用程序等场景,可以提供更低的延迟和更快的响应速度。WebSocket 协议也得到了广泛支持,现代浏览器和服务器都已经内置了 WebSocket 支持,许多编程语言和框架也提供了 WebSocket 实现。

2、先判断浏览器是否支持:if(window.WebSocket)

if(window.WebSocket){

console.log("支持")

}else{

console.log("不支持")

}

3、WebSocket是一种通信协议,用于在客户端和服务器之间进行双向通信。它允许Web浏览器和服务器之间实时交换数据,可以替代传统的HTTP轮询技术。

3.1、以下是WebSocket的基本使用步骤:

客户端通过JavaScript代码创建WebSocket对象,指定WebSocket服务器的地址:
var socket = new WebSocket("ws://example.com/socket");

当连接成功建立后,WebSocket对象的onopen回调函数会被调用。在这个回调函数中,您可以执行一些初始化操作或发送第一条消息:
socket.onopen = function(event) {
    // 在此处执行初始化操作或发送第一条消息
};

当WebSocket接收到来自服务器的数据时,WebSocket对象的onmessage回调函数会被调用,并将接收到的数据作为参数传递给该函数:
socket.onmessage = function(event) {
    console.log("收到消息:" + event.data);
};

客户端可以通过WebSocket对象的send()方法向服务器发送消息:
socket.send("Hello, server!");

当客户端不再需要WebSocket连接时,应该调用WebSocket对象的close()方法关闭连接:
socket.close();

服务器也可以通过WebSocket对象发送消息到客户端。当服务器发送消息时,客户端的onmessage回调函数会被调用,客户端可以在该回调函数中处理接收到的消息。
以上是WebSocket最基本的使用方法。除此之外,WebSocket还支持多种高级特性,例如二进制数据传输、ping/pong帧、断开重连等。

3.2、前后端链接的基础使用:

WebSocket 是一种在 Web 应用程序中实现双向通信的协议。在 Node.js 中,可以使用 ws 模块来创建 WebSocket 服务器。
下面是一个简单的示例:
const WebSocket = require('ws');
​
const wss = new WebSocket.Server({ port: 8281 });
​
wss.on('connection', (ws) => {
  console.log('Client connected');
​
  ws.on('message', (message) => {
    console.log(`前端数据: ${message}`);
    ws.send(`发送给前端: ${message}`);
  });
​
  ws.on('close', () => {
    console.log('断开链接');
  });
});
这个例子创建了一个 WebSocket 服务器,监听端口 8080。当客户端连接时,会触发 connection 事件,并打印出 "Client connected"。然后,当收到客户端发送的消息时,会触发 message 事件,并打印出接收到的
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值