Preface
With the continuous development of technology and the increasing demand for instant messaging, the need to use WebSocket technology to achieve instant messaging is increasing. In this blog, we will explain how to combine Vue and use WebSocket to achieve instant messaging.
What is WebSocket?
WebSocket is a protocol for full duplex communication on a single TCP connection. The advantages of Websocket are:
- Can be used with any web browser
- Passing binary data supports JSON, XML and other formats
- With lower latency, faster communication can be achieved
- Maintaining a long connection between the client and the server can reduce the number of HTTP requests.
Preparation
First, we need to install and Vue. If you already have one or both, you can skip this step.
- If you do not have it installed, please go to the official website to download the latest version and complete the installation:/en/download
- If you do not have Vue installed, please use the following command to install:
npm install -g @vue/cli
Create a project for Vue
Creating a Vue project is simple. Run the following command in the terminal:
vue create my-project
This will automatically create a basic Vue project for you.
Start the server
Create a file named , in the project root directory to start the server. Use the following command to install the required dependencies:
npm install ws express cors
Enter the following code in the file:
const WebSocket = require('ws');
const express = require('express');
const cors = require('cors');
const app = express();
(cors());
const server = (8080, () => {
('Server started on port 8080');
});
const wss = new ({ server });
('connection', (ws) => {
('message', (message) => {
(`Received message => ${message}`);
((client) => {
if (client !== ws && === ) {
(message);
}
});
});
});The above code starts an Express server listening to port 8080 and uses WebSocket to start the message push function.
To start the server, run the following command in the terminal:
node
Use WebSocket to communicate in Vue
In the src folder of the Vue project, create a component named . This component will be used to process WebSocket messages:
<template>
<div>
<h2>Messages</h2>
<ul>
<li v-for="message in messages" :key="">
{{ }}
</li>
</ul>
<hr>
<input type="text" v-model="inputMessage">
<button @click="sendMessage()">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
inputMessage: '',
};
},
mounted() {
= new WebSocket('ws://localhost:8080');
= ;
},
methods: {
handleMessage(event) {
const message = ();
(message);
},
sendMessage() {
const message = {
id: (),
text: ,
};
((message));
= '';
},
},
};
</script>In the component, we sent a message to WebSocket and updated the message list when we received it. We also provide the user with an input box and a send button to enter and send new messages.
Summarize
In this blog, we describe how to implement instant messaging using Vue and WebSocket. We enabled the message push using WebSocket by creating an Express server. Using WebSocket to implement communication in Vue requires creating a component that can also send and receive messages using WebSocket.
This is the end of this article about Vue++ WebSocket realization of instant messaging. For more related Vue Node WebSocket realization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!