Wizey, Wizey, Wizey, Wizey, Wizey, Wizey


1, the introduction



Typical WEB-BASED IM application scenarios are as follows:





  • 1) Use it as a complete INSTANT messaging product, such as a stand-alone Web-side IM product;
  • 2) Use it as part of a larger system: customer service (like embedding IM technology into the workorder system).





















PS:
WebSocket






Friendly tips:


2. What are cross-domain problems


















3. Why do cross-domain problems occur



Three conditions must be met to create a cross-domain problem:





  • 1) The browser restriction, but not the server restriction, can check Network, request can be correctly responded, response return value is correct;
  • 2) The domain name or port of the requested address is different from the currently accessed domain name or port;
  • 3) Send XHR (XMLHttpRequest) request, can be compared with a tag (simulate XHR request) and img tag (simulate JSON request) (console only reported a cross-domain exception).










Do you really know how to use XMLHttpRequest?






























Cross-site request forgery


4. Three ways to solve cross-domain problems


  • 1) Client browser lifting cross-domain restrictions: this method is theoretically possible but unrealistic;
  • 2) Send JSONP requests instead of XHR requests: this approach has some limitations — for example, requests can only be GET, but it is friendly for deployment because no server configuration changes are required;
  • 3) Modify the server configuration (including the HTTP server and application server) : This method has no limitations for GET and POST requests, but is unfriendly for deployment. You need to modify the configurations of the application server and reverse proxy server.


5. Solution 1: Set the browser to remove the cross-domain restriction
















How does the browser determine if a request is cross-domain?












Non-cross-domain request:










Cross-domain request










[Browser classification of requests]












Simple request:












Non-simple request:









































Cross domain solution 2: Use JSONP instead of XHR


6.1 what is the json



Detailed explanation of the evolution of Web side communication mode: from Ajax, JSONP to SSE, Websocke





6.2 Does the server background code need to be changed when using JSONP?









The AJAX code looks like this:


$. Ajax ({url: baseUrl + "/get1 ", dataType: "jsonp ", // Success: function(json) {result = json; }});Copy the code



Server code:


@ControllerAdvice public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback "); }}Copy the code


6.3 Implementation Principles of JSONP


































































6.4 Advantages and disadvantages of JSONP



Advantages of JSONP:






Disadvantages of JSONP:





  • 1) Only GET method requests are supported, regardless of whether the actual request method in AJAX is GET or not;
  • 2) The server also needs to change the code (which is a disadvantage if you think that changing the server code is more annoying than changing the server configuration);
  • 3) Send a non-XHR request and cannot use XHR objects (but this is the root of why cross-domain problems can be solved).


7. Solution 3: Modify the cross-domain configuration of the application server





















7.1 Modified by the Called party
















Add the specified field to the application server:





















































Add the specified field to the HTTP server:































7.2 Caller Modification









































8. Download the supporting code of this article




cross-domain-master(52im.net).zip
(313.96KB, download times: 0, price: 1 gold)


Appendix 1: An outline of an introduction to Instant messaging technology on the Web



Web Instant Messaging beginner post:



Beginner’s notes: Explain how instant messaging works on the Web






For an inventory of instant messaging technologies on the Web, see:



Web side im technology inventory: short polling, Comet, Websocket, SSE






About Ajax short polling:









For details on Comet technology, see:


  • Comet Technology in Detail: Real-time Web Communication Technology Based on HTTP Long Connection
  • Instant Messaging on the WEB: A Detailed explanation of HTTP Long Polling
  • Instant Messaging on the WEB: Instant Messaging without WebSockets
  • IComet: A Web instant Messaging solution for Millions of Concurrent users



For more details on WebSocket, see:


  • Quick Start for Beginners: WebSocket Tutorial
  • WebSocket In Detail (1) : A Preliminary Understanding of WebSocket Technology
  • WebSocket In Detail (II) : Technical Principles, Code Demonstrations and Application Cases
  • Details of WebSocket (iii) : In-depth Details of WebSocket Communication Protocol
  • WebSocket in Detail (4) : Getting to the bottom of HTTP and WebSocket relationship (part 1)
  • WebSocket details (5) : Getting to the bottom of HTTP and WebSocket relationship (Part 2)
  • WebSocket In Detail (6) : Probing the relationship between WebSocket and Socket
  • Theory and Practice: Understanding Communication Principle, Protocol Format and Security of WebSocket from Zero
  • Introduction to Socket.IO: WebSocket Support, Instant Messaging Framework for WEB Side
  • What is the relationship between socket. IO and websocket? What is the difference?



For a detailed introduction to SSE, see:



SSE technology details: a new HTML5 server push event technology






For more WEB im articles, see:



www.52im.net/forum.php?m…


Appendix 2: More highlights on instant messaging development on the WEB



Web side im technology inventory: short polling, Comet, Websocket, SSE



SSE technology details: a new HTML5 server push event technology



Socket. IO implementation of message push practice and ideas



LinkedIn instant messaging practice on the Web: hundreds of thousands of long connections in a single machine



The development of Instant messaging technology on Web and the practice of WebSocket and socket. IO technology



Instant Messaging Security on the Web: Cross-site WebSocket hijacking (with sample code)



Open source framework Pomelo practice: Build a high-performance distributed IM chat server on the Web end



WebSocket and SSE technology is used to push Web messages



Detailed explanation of the evolution of Web side communication mode: from Ajax, JSONP to SSE, Websocket



Why does the mobile IMSDK-Web network layer framework use socket. IO instead of Netty?



Theory and practice: understand the communication principle, protocol format and security of WebSocket from zero



Wechat small program how to use WebSocket to achieve long connection (including complete source code)



WebSocket protocol: quick answers to popular WebSocket questions



Quick introduction to Electron: The new Generation of Web-based cross-platform desktop technology



Understanding the Evolution of front-end Technology: A review of the 20 years of technological change in the Web front End



Instant messaging on the Web: understand all the cross-domain issues!



More of the same…