创建项目

因为要实现前后端通信，要创建一个文件放服务器和客户端

这个操作很简单，按照官网教程创建项目即可，比如我创建了这样一个文件夹

cn.vuejs.org/guide/quick...

客户端框架是vue,服务端是express 根据官网的教程创建client和server

cn.vuejs.org/guide/quick...

www.expressjs.com.cn/starter/gen...

创建完成之后，用vscode打开，结构大概是这样的

服务端安装一下socket.io

npm install --save socket.io

客户端也装一下

npm i socket.io-client -s

我们都知道websocket，浏览器和服务器只需进行一次握手，就可以创建持久的连接，实现数据双向传输。而socket.io又是什么呢？简而言之，它是一个库，当前环境不支持websocket时，会使用轮询的方法实现数据的双向传输。

服务端代码

在这里主要用到的socket.io的方法是socket.emit和socket.on，打开服务端app.js这个文件

可以参考教程在app.js这个文件下写下自己的代码。教程地址：socket.io/zh-CN/docs/...

但是官网的教程直接使用是有问题的，会有跨域问题，所以我对代码进行了一些修改。 cors：true可以解决跨域问题。

js 复制代码

const socketIo = require('socket.io')
// 端口号与跨域
const io = new socketIo.Server(1234, { cors: true })
io.on('connection', (socket) => {
    console.log('client connected');

    //监听客户端
    socket.on('message', (data) => {
        console.log('received message', data);
        // socket.emit('back', data)
        socket.emit('back', data)
    })

    socket.on('disconnect', () => {
        console.log('client disconnected');
    })
})

客户端代码

客户端新建一个.vue文件，我的页面初始绘制出来是这样的。我想实现这样的功能，当我点击按钮时，传递一个时间戳传给服务端，服务端再将数据传递回来,通过ant-design的通知提醒框进行提示。

js 复制代码

<template>
  <a-button @click="sendMessage">
    消息提示
  </a-button>
</template>
<script setup>
import { ref } from 'vue'
import { io } from 'socket.io-client'
import { notification } from 'ant-design-vue';
const store = useCounterStore()
const socket = io('ws://localhost:1234');
const data = ref('')
const sendMessage = () => {
  socket.emit('message', Date.now())
}

socket.on('back', (res) => {
  console.log(res)
  notification.open({
    message: '消息来了',
    description: res,
    onClick: () => {
      console.log('Notification Clicked!');
    },
  });
});

</script>

这里可以注意到io('ws://localhost:1234')，这段代码中有个1234，这是和服务器里的1234对应的。这样简单实现了需求，当点击按钮时弹出了消息提示。

websocket的应用，socket-io+node express+vue3，简单实现前后端消息提示功能

创建项目

服务端代码

客户端代码