WebSocket实现实时通讯

WebSocket实现实时通讯

WebSocketHTML5以后基于TCP协议应用层的一种全双工实时通讯协议。注:全双工:个人了解服务器和客户端可以进行信息的相互传递

WebSocket由何而来

在没有WebSocket的时候,我们都是基于HTTP协议进行的一种实时通信。而HTTP协议并没有状态,而服务器只会响应来自客户端请求,而他并不具备持续连接.
所以我们必须手动去获取:
两种方式:

长轮询:

描述: 在规定的时间内客户端通过Ajax去服务器端发送请求,问服务器端收到了某某某的消息没,如果收到了,那么则返回消息,否则返回某种状态.此次请求到此结束。

优点: 后端的代码容易去编写

缺点: 请求中大部分都是失效的,浪费资源。注:(说不定某次请求服务器时,对方并没有发送消息)

长连接:

描述: 客户端发送Ajax请求到服务器,服务器一直保持与客户端的连接。直到有新消息发送过来的时候返回给客户端的时候,才关闭该连接

优点: 在没有消息的时候不会动不动就去发送请求,浪费资源较少

缺点: 服务器与客户端一直保持连接会浪费资源。返回的顺序无保障,难以维护

WebSocket协议了解

描述: 它是借Http请求产生握手,在Http的头部会包含WebSocket协议的请求,所以握手之后,协议进行一个升级,转成TCP协议进行交流.

优点: 服务器能够主动发送消息给客户端,从而保证一个实时性

缺点: 不支持低版本浏览器,Tomcat7.0以下,对开发人员要求较高.需要了解JavaScript.(一般程序员都会滴咯!例如说:ME)

WS与WSS协议?

描述: WebSocket (WS):默认是基于HTTP80端口

WSS(Web Socket Secure)是WebSocket的加密版本,默认是基于HTTP443端口。

WebSocket如何进行实时通讯

在这里插入图片描述
描述: 首先客户端发送链接请求到服务器,服务器做出反应.是否连接成功.连接成功后,我们可以给指定用户发送消息,消息首先经过服务器验证,判断用户是否在线,如果在线服务器主动给对方客户端发送消息.

简单示例讲解

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 React TypeScript 中实现实时通信,可以使用 WebSocket 技术。下面是一个简单的示例,展示了如何使用 WebSocket 实现实时通信: ```typescript import React, { useState, useEffect } from 'react'; function ChatRoom() { const [messages, setMessages] = useState<string[]>([]); const [newMessage, setNewMessage] = useState<string>(''); useEffect(() => { const socket = new WebSocket('ws://localhost:8080'); socket.onopen = () => { console.log('WebSocket connected'); }; socket.onmessage = (event) => { const message = event.data; setMessages((prevMessages) => [...prevMessages, message]); }; socket.onclose = () => { console.log('WebSocket disconnected'); }; return () => { socket.close(); }; }, []); const handleNewMessage = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); setMessages((prevMessages) => [...prevMessages, newMessage]); const socket = new WebSocket('ws://localhost:8080'); socket.send(newMessage); setNewMessage(''); }; return ( <div> <ul> {messages.map((message, index) => ( <li key={index}>{message}</li> ))} </ul> <form onSubmit={handleNewMessage}> <input type="text" value={newMessage} onChange={(event) => setNewMessage(event.target.value)} /> <button type="submit">Send</button> </form> </div> ); } ``` 在上面的示例中,我们使用 `useState` 钩子来存储消息列表和输入框中的新消息。在 `useEffect` 钩子中,我们创建了一个 WebSocket 对象并通过 `onopen`、`onmessage` 和 `onclose` 方法来处理连接、接收消息和断开连接的事件。在 `handleNewMessage` 函数中,我们发送新消息到服务器并将其添加到消息列表中。最后,我们渲染了一个消息列表和一个输入框,使用户可以输入新消息并发送到服务器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值