websocket解决跨域

Hi，我是贝格前端工场，专注前端开发8年了，前端始终绕不开的一个话题就是如何和后端交换数据（通讯），本文先从最基础的通讯方式讲起。

一、什么是前后端通讯

前后端通讯（Frontend-Backend Communication）指的是前端和后端之间进行数据交互和通信的过程。在Web开发中，前端通常负责展示数据和用户交互，后端负责处理业务逻辑和数据存储。为了实现前后端的数据交互和通信，需要使用一些通信方式和协议。

前后端通讯的目的是实现数据的传输和交互，以满足前端的功能需求和后端的业务逻辑。通过合适的通讯方式和协议，可以实现高效的前后端协作和数据交互。

二、前端调用后端接口的五种方式

前端调用后端接口有以下几种常见的方式：

前后端不分离

1. Ajax：使用JavaScript的Ajax技术向后端发送HTTP请求并接收响应。可以使用原生的XMLHttpRequest对象或现代的Fetch API来实现Ajax请求。Ajax可以实现异步通信，无需刷新整个页面，可以在后台与服务器进行数据交互。

2. Axios.js：Axios.js是一个基于Promise的HTTP客户端库，可以用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，提供了简洁的API和丰富的功能，如请求拦截、响应拦截、取消请求等。

3. Fetch API：Fetch API是浏览器原生提供的一组用于发送HTTP请求的API。它提供了更现代化和简洁的方式来发送请求，并返回一个Promise对象。Fetch API支持异步通信，可以设置请求头、发送不同类型的数据等。

4. WebSocket：WebSocket是一种全双工通信协议，可以在浏览器和服务器之间建立持久的连接。通过WebSocket，前端可以与后端进行实时通信，而不需要通过轮询或长轮询来获取数据。

5. RESTful API：RESTful API是一种基于HTTP协议的API设计规范，可以通过HTTP的GET、POST、PUT、DELETE等方法来访问后端资源。前端可以使用Ajax、Axios.js等工具来发送HTTP请求，调用后端的RESTful API进行数据交互。

以上是一些常见的前端调用后端接口的方式。具体使用哪种方式取决于项目需求和个人偏好。

三、他们之间有什么区别和优劣势

这些前端调用后端接口的方式各有优劣势，下面是它们之间的区别和一些常见的优劣势：

Ajax：

• 优势：使用广泛，兼容性好，可以实现异步通信，无需刷新整个页面，可以在后台与服务器进行数据交互。

• 劣势：需要手动处理请求和响应，代码相对繁琐，不支持跨域请求（需要使用CORS或代理解决）。

Axios.js：

• 优势：基于Promise，使用简单，提供了丰富的功能，如请求拦截、响应拦截、取消请求等，支持浏览器和Node.js环境。

• 劣势：需要引入第三方库，增加项目的依赖。

Fetch API：

• 优势：是浏览器原生提供的API，使用简洁，返回Promise对象，支持异步通信，支持设置请求头、发送不同类型的数据。

• 劣势：兼容性不如Ajax，不支持取消请求。

WebSocket：

• 优势：支持实时通信，建立持久连接，可以双向通信，适用于需要实时更新数据的场景。

• 劣势：相对复杂，需要服务器端支持WebSocket协议。

RESTful API：

• 优势：基于HTTP协议，使用简单，规范性强，易于理解和维护，适用于大多数Web应用。

• 劣势：不适用于实时通信，需要服务器端提供相应的API支持。

综合考虑，选择合适的方式取决于具体的项目需求和开发环境。

四、分别使用什么场景

不同的前端调用后端接口方式适用于不同的场景，下面是它们常见的应用场景：

Ajax：

• 适用于需要在页面上实现异步交互的场景，如表单提交、数据加载等。

• 可以用于实现无需刷新整个页面的局部更新，提升用户体验。

• 适用于需要与后端进行数据交互，但不需要实时通信的场景。

Axios.js：

• 适用于需要在浏览器和Node.js环境中发送HTTP请求的场景。

• 提供了更丰富的功能，如请求拦截、响应拦截、取消请求等，适用于复杂的数据交互需求。

• 可以用于处理并发请求，提供更好的性能和用户体验。

Fetch API：

• 适用于现代化的浏览器环境，可以使用浏览器原生提供的API发送HTTP请求。

• 提供了更简洁的方式来发送请求，并返回Promise对象，适用于简单的数据交互需求。

• 支持设置请求头、发送不同类型的数据，适用于处理多种数据格式的场景。

WebSocket：

• 适用于需要实时通信的场景，如聊天应用、实时数据更新等。

• 可以建立持久连接，支持双向通信，适用于需要频繁更新数据的场景。

• 相对复杂，需要服务器端提供WebSocket协议的支持。

RESTful API：

• 适用于构建标准化的Web应用，通过HTTP的GET、POST、PUT、DELETE等方法来访问后端资源。

• 可以实现前后端的数据交互和资源管理，适用于大多数Web应用。

• 不适用于实时通信的场景，需要其他方式来实现实时数据更新。

需要根据具体的项目需求和开发环境选择合适的方式。一般来说，Ajax和Axios.js是常用的方式，适用于大多数场景。Fetch API是现代化的方式，适用于浏览器原生环境。WebSocket适用于需要实时通信的场景。RESTful API适用于构建标准化的Web应用。

怀南韩3919websocket有没有可能取代ajax -
甫阮饶17317273462 ______ 应该不可能取代,两者还是有区别的.功能不同, 所以觉得没有谁取代谁一说. socket适用于接近real time的数据交互,但是会给服务器带来很大压力. 在很多web app或者网页中并没有很苛刻的要求real time, 所有会用ajax来更新数据和内容.比如要对HTTP服务器上一个特殊格式文件请求下载并解析格式时,websocket一点用处都没有.而ajax可以完成完整的http协议请求,它自己就能封装http协议.唯一的缺点是不能跨域,不过有变通的方式解决.

怀南韩3919java websocket web网页聊天怎么实现 -
甫阮饶17317273462 ______ websocket 是反向推送的一种类型 聊天需要实时性高,在A第一次发送信息给B的时候需要建立websocket的连接,A向B发送信息就通过websocket完成.A如果关闭窗口则websocket断开连接

怀南韩3919请问websocket该如何建立与连接 -
甫阮饶17317273462 ______ 在连接之前需要知道一下几点:1、了解websocket的协议和请求规范;2、使用PHP的socket函数库来处理websocket的请求;3、处理websocket的数据帧.下面是我写的一个小例子,里面的注释我觉得也挺详细的了,对帧的处理我没有完善,...

怀南韩3919socket websocket 哪个好 -
甫阮饶17317273462 ______ 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯.在JavaEE7中也实现了WebSocket协议.

怀南韩3919webSocket长时间连接后会不会变卡 -
甫阮饶17317273462 ______ 不会变卡,会断开连接. WebSocket连接后一分钟自动断开关闭. 这是因为websocket长连接有默认的超时时间(1分钟,由proxy_read_timeout决定),就是超过一定的时间没有发送任何消息,连接会自动断开.解决办法就是让浏览器每隔一定时间(要小于超时时间)发送一个心跳.代码如下: //每隔5秒钟发送一次心跳,避免websocket连接因超时而自 动断开 window.setInterval(function(){ var ping = {＂type＂:＂ping＂}; ws.send(JSON.stringify(ping)); },5000);

怀南韩3919java socket怎么与websocket对接 -
甫阮饶17317273462 ______ 这个问题问的不是很专业!准确的说,应该是java如何开发一个websocket协议的服务端程序与js前端对接!因为java socket不是一种协议,他是tcp的实现,而websocket则是一种协议(类似与HTTP,但与其不完全相同).至于实现方式,在...

怀南韩3919如何搭建 websocket服务器 -
甫阮饶17317273462 ______ 其实,在服务器的选择上很广,基本上,主流语言都有WebSocket的服务器端实现,而我们作为前端开发工程师,当然要选择现在比较火热的NodeJS作为我们的服务器端环境了. NodeJS本身并没有原生的WebSocket支持,但是有第三方的实...

怀南韩3919如何在Spring中配置Websocket -
甫阮饶17317273462 ______ 参考如下配置过程: 首先我们需要添加相关的依赖包: Websocket需要servlet3.1的版本 spring-websocket和spring-messaging是Spring关于Websocket的组件 使用Jackson进行json数据的处理 build.gradle String springVersion = ＂4.1.4....

怀南韩3919websocket 消息推送只能在某一个页面吗? -
甫阮饶17317273462 ______ 先插一嘴 HTML5 这东西还不是所有浏览器都能完美兼容.一般都是用多 frame 来实现,即建立 WebSocket 是单独的一个 frame,且此 frame 不随页面切换而刷新,至于其他需要在页面切换时刷新的元素放在其他 frame 里.另外题主的担忧完全是没有必要的.在没有 HTML5 之前都是用轮询或者 Ajax 来实现消息推送的,WebSocket 本身占用的资源就比前两者要少,要是连这种强度服务器都承受不了,不知题主之前是咋做的?

怀南韩3919如何避免websocket重复连接 -
甫阮饶17317273462 ______ 你实现TextWebSocketHandler中的类中在 afterConnectionClosed();连接关闭后,里面如果定义了用户断开连接就移除websocketsession就没有问题.还有就是不要在多个页面建立连接,尽量使用子夫页面互调方法的方式实现数据传递.