A list,

This is a super lightweight desktop version of the chat software based on JS. It mainly applies to private cloud project internal chat, enterprise internal management communication and other functions, and the main communication protocol Websocket. Web chat implementation is also supported. Text chat, mutual file transfer, offline message, group chat, disconnection reconnection and other functions.

Take a look at the effect first. The left side is the Web version and the right side is the PC version.

Two, local construction

2.1 technology stack

Back-end technology stack:

  • Springboot: A Java microservices framework for rapid development by developers.
  • Tio: It is a million-level network framework
  • Oauth2.0: OAuth 2.0 is an industry standard licensing protocol. OAuth 2.0 focuses on simplifying client-side developers while providing specific licensing processes for Web applications, desktop applications, mobile phones, and living room devices.

Front-end technology stack:

  • Vue: A progressive front-end framework for building user interfaces.
  • Iview: a set of open source UI component library based on vue.js, mainly serving PC interface in the background products.
  • Electron: An open source library for building cross-platform desktop applications with HTML, CSS, and JavaScript.

2.2 Starting back-end Services

Download the project Use the gitBash tool to download the project locally

git clone https://gitee.com/lele-666/V-IM.git
Copy the code

As an illustration, the front and back end of the project is downloaded in one go.

  • V-im-pc: Front-end code
  • V-im-server: back-end code

Change the path of database connection and file upload.

#server.port=8081

spring.mvc.static-path-pattern=/**
The path to the uploaded fileweb.upload-path=D:/Temp spring.datasource.driver-class-name=com.mysql.jdbc.Driver Spring. The datasource. Url = JDBC: mysql: / / 127.0.0.1:3306 / vim? useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
...
Copy the code

Note: The port of the back-end service can be set as required. The default port is 8080.

Initialize the database database initialization script in V-IM-server \doc\init-20181231.sql, use Navicat database visualization tool to import the database script.

Run vServerApplication. Java to import the project into Idea, automatically download the dependencies of the project, and directly run the main method of the project VServerApplication class to start the backend service in the development environment.

2.3 startwebThe front-end service

Download dependencies Execute the following command in one go to download all the dependencies required by the front-end project.

cd V-IM-PC # change directory
npm install # NPM install dependencies
yarn #yarn 
Copy the code

Local running Local running can be done on the Web or PC. The command is as follows:

npm run serve Run in web mode
npm run electron:serve Run as a client
Copy the code

Note: When the Web starts, the front-end project accesses port 8080, which is the same as the back-end port, so it is ok to change the front-end access port. Change the file to index.js:

Export default {app_name: "v-im ", http_protocol:" HTTP ", http_port: 8080, # "/api/user/init", his_url: "/api/message/list", chat_users_url: "/api/user/chatUserList", token_path: "/oauth/token", register_url: "/register", ws_protocol: "ws", getHostUrl: function() { return ( this.http_protocol + "://" + localStorage.getItem("host") + ":" + this.http_port ); },...Copy the code

The web version looks like this:

PC

Package command local test function problems, you can carry out the project package, package command also has two:

npm run build Package as web
npm run electron:build Package as an executable
Copy the code

2.4 startPCThe front end

There are two ways to install the PC version: download the *. Exe file that the author has packaged, or use the command above to build the PC version yourself. I downloaded the PC version directly here. Download :gitee.com/lele-666/V-… Local run PC version installed, double-click to run. The effect is shown below:

service

Three, the last

Follow such steps down, a few minutes can build QQ version chat tools. This article describes the steps of building chat tools in the development environment. Server deployment is also extremely simple. If you are interested in this chat tool, just click!

The attached

  • T-io project address: gitee.com/tywo45/t-io

Restless ape man
Continuous technology sharing!