WebSocket实现实时通讯

WebSocket是HTML5以后基于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如何进行实时通讯

15396149-03618454406bee92.jpg

WebSocket客户端与服务器端通讯流程

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

简单示例讲解

15396149-94790c2f5baace9d.png

前端代码JS

15396149-bc9dc3f9323a09c0.png

后端代码片段1

15396149-d0740b6b227ea33d.png

后端代码片段2
要在 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、付费专栏及课程。

余额充值