Using Java and websocket to realize the example code of web chat room

Before introducing the text, let's introduce the background and principle of websocket:

background

In the browser, only one-way communication can be realized through HTTP, and comet can simulate two-way communication to a certain extent, but it is inefficient and needs better support from the server; Socket and XML socket in flash can realize real two-way communication. These two functions can be used in JavaScript through flex Ajax bridge It can be predicted that if websocket is implemented in the browser, it will replace the above two technologies and be widely used Faced with this situation, HTML5 defines websocket protocol, which can better save server resources and bandwidth and achieve real-time communication.

Websocket protocol is also implemented in Java EE 7.

principle

WebSocket protocol 。

Now, in order to realize instant messaging, many websites use polling technology. Polling is performed at specific time intervals (such as every 1 second), the browser sends an HTTP request to the server, and then the server returns the latest data to the client browser. This traditional HTTP request mode brings obvious disadvantages. C browser needs to send requests to the server continuously. However, the header of HTTP request is very long, and the useful data contained in it may be only a small value , which takes up a lot of bandwidth.

The effect of polling with relatively new technology is that comet C uses Ajax. However, although this technology can achieve full duplex communication, it still needs to send a request.

In the websocket API, the browser and server only need to shake hands, and then a fast channel is formed between the browser and the server. The two can directly transmit data to each other. This websocket protocol brings us two benefits to realize instant service:

1. Header

The headers communicating with each other are very small - about 2 bytes

2. Server Push

For server push, the server no longer passively returns data after receiving the browser's request, but actively pushes it to the browser when there is new data.

1、 Project introduction

Websocket is a new protocol of HTML5. It realizes full duplex communication between browser and server. Here, websocket will be used to develop web chat room. The front-end framework will use amazeui, the background will use Java, and the editor will use umeditor.

2、 Knowledge points involved

Web front end (HTML + CSS + JS) and Java

3、 Software environment Tomcat 7 JDK 7 eclipse JavaEE modern browser

4、 Effect screenshot

Effect 1

Effect 2

5、 Project practice

1. New project

Open eclipse Java EE, create a new dynamic web project named chat, and then import the package required to process JSON format strings. Put commons-bean utils-1.8 0.jar、commons-collections-3.2. 1.jar、commons-lang-2.5. jar、commons-logging-1.1. 1.jar、ezmorph-1.0. 6. Jar and json-lib-2.4-jdk15 Jar packages are placed in the webcontent / WEB-INF / lib directory. Finally, the project is published to the Tomcat server. The empty project is completed.

2. Write front page

Create a new one named index. In the webcontent directory JSP page, which uses the amazeui framework. It is a cross screen adaptive front-end framework. The message input box uses umeditor. It is a rich text online editor, which can make our message content colorful.

First download the compressed package from the official website of amazeui, then unzip it and copy the assets folder to the webcontent directory, so that we can use amazeui.

Then download the mini JSP version compressed package from the uediter official website, unzip and copy the entire directory to the webcontent directory. Next, you can write the front-end code as follows (you can write it according to your preferences):

After writing, start the Tomcat server, and then access http://localhost:8080/Chat/index.jsp , you will see the following interface.

3. Write background code

Create a new com shiyanlou. Chat package creates a class named chatServer in the package. Since JavaEE 7, the API of websocket has been unified. Therefore, no matter what server is, the code written in Java is the same. The code is as follows:

4. Front and rear interaction

After the background is written, the foreground needs to use websocket to connect to the background. You need to create a new websocket object, and then you can interact with the server, send messages from the browser to the server, verify whether the contents of the input box are empty, and then accept the messages sent by the server, and dynamically add them to the chat content box

At this point, a simple web chat room is completed. You can open more windows or invite friends to test together in the LAN.

6、 Summary

This project class uses websocket to realize a simple web chat room. In fact, websocket can be applied not only to browsers, but also to desktop clients.

7、 Thinking questions

This project class is just a simple chat room. In fact, there are many functions that can be added, such as avatar upload function, one-to-one chat function, etc. Let's improve the chat room together.

If you want to try it right away, click here to provide you with a free online compilation environment, so that you don't worry about building an environment

The above is the relevant knowledge of using Java and websocket to realize the example code of web chat room introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!