利用Websocket进行前后端通信_websocket前后端交互

一、websocket是什么

是一种基于TCP协议的网络通信技术，它提供了一个持久的、全双工的通信通道，可以在客户端和服务器之间进行实时的双向通信。
特点：WebSocket允许服务器主动向客户端推送数据，而不需要客户端发送请求。这种实时通信的特性使得WebSocket非常适合在Web应用中实现实时消息推送、实时数据更新等功能。

二、前后端交互的方式

1. 拉 客户端ajax请求等等；
2. 推 服务器主动向客户端推送消息
3. 轮询 客户端定时向服务器发送请求，服务器 接到请求后马上返回响应信息并关闭连接
4. 长连接 客户端与服务器保持不间断的连接；

三、使用koa2结合 socket.io：socket.io是对websocket的封装，用于客户端与服务端的相互通讯
（聊天室的例子:服务器主动向客户端推送消息）

后端
1.安装socket.io

npm install socket.io --save
1

在index.js 入口文件导入

const Koa = require('koa');
const cors = require('koa2-cors');

const server = require('http').Server(app.callback())
const io = require('socket.io')(server, {cors: true})
const { handleChatRoom } =require('./modules/chatRoomSocket.js')	// 导入模块
handleChatRoom(io)													//调用handleChatRoom方法传io

//监听端口
server.listen(3006, () => {
  console.log('socket server run at 3006')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.chatRoomSocket.js 模块

const { doSQL, getOne } = require('../utils/database')

const save = async (form) => {
  const sql = 'insert into chat_room (name, avatar, gender, content) values (?,?,?,?)'
  const res = await doSQL(sql, [form.name, form.avatar, form.gender, form.content])
  // console.log(res)
}

const getList = async () => {
  const sql = 'select * from chat_room order by id'
  const res = await doSQL(sql)
  return res
}

const handleChatRoom = (io) => {
  io.on('connection', async (socket) => {  //客户端与服务端建立连接
    console.log('socket 初始化成功')
    socket.emit('get-list', await getList())
    socket.on('send-message', async (data) => {
      console.log(data)
      await save(data)
      //给所有的客户端广播消息
      io.sockets.emit('get-list', await getList())
    })
    
  })
}

module.exports = {
  handleChatRoom
}



//给出了自己外的客户端广播消息
//client.broadcast.emit('message',value)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

前端
1.安装依赖

npm install socket.io-client  --save
1

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import io from 'socket.io-client' 

let socket
const list = ref([])
const box = ref()
const form = ref({
  content : '',
  name:'mil',
  avatar:'test.png',
  gender:0
})


// 监听 渲染页面的数组
watch(list.value,()=>{
    scrollBottom()
})
onMounted(()=>{
  socket= io('http://localhost:3006')
  socket.on('connect' , () =>{
    console.log(socket.id,'监听客户端成功');  
  })
  socket.on('get-list',(data) => {
    list.value = data 
    scrollBottom()
  })


})

//滚动条保持在底部
const scrollBottom = () => {
  nextTick(()=>{
    box.value.scrollTop = box.value.scrollHeight
  })
}
const send = ()=> {
  socket.emit('send-message',form.value)
  form.value.content=''
}
</script>

<template>
  <h2>聊天室</h2>
  <div class="list" ref="box">
    <ul>
      <li v-for="item in list">{{item.content}}</li>
    </ul>
  </div>
  <div class="footer">
    <textarea class="message" v-model="form.content"></textarea>
    <button @click="send">发送</button>
  </div>
</template>

<style scoped>
  .list {
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: auto;
  }
  .list > ul {
    display: flex;
    flex-direction: column-reverse;
  }
  .footer {
    display: flex;
    margin-top: 10px;
    height: 100px;
  }
  .footer textarea {
    outline: none;
  }
  .footer button {
    width: 100px;
  }
  .message {
    flex-grow: 1;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82