websocket

最新推荐文章于 2024-11-10 22:45:39 发布

码农小嘉

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量112

点赞数

分类专栏：前端 vue 语句文章标签：前端 javascript 网络 vue.js 语法 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_38806666/article/details/129057973

版权

语句同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

23 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

服务端

/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-11-16 15:35:39
 * @LastEditors: voanit
 * @LastEditTime: 2022-11-16 16:03:04
 */const express = require('express')
const app = express()
const http = require('http').createServer(app)
const io = require('socket.io')(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域const messageList = []
io.on('connection', (socket) => {
  // 客户端链接成功
  console.log('~connection~')
  // 触发一个message事件  传递一个对象数据过去   浏览器
  socket.emit('message', { msg: '我是服务器' })

  socket.on('Tom', (e) => {
    // console.log('tom', e)/* 这里如果使用 socket  表示：谁触发tom事件只会向谁发射事件
    如果是发射事件触发对象是io 表示：只要监听了触发事件都会监听触发
    */
    io.emit('messageTom', e)
  })
})

http.listen(3009, '192.168.103.84', (_) => {
  console.log('http://192.168.103.84:3009')
})

前端 tom页面

<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-11-16 15:40:30
 * @LastEditors: voanit
 * @LastEditTime: 2022-11-16 16:31:06
--><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Tom</title><scriptsrc="https://cdn.socket.io/4.4.0/socket.io.min.js"></script><!-- <script src="https://cdn.socket.io/4.4.1/socket.io.esm.min.js"></script> --></head><body><ul></ul><inputtype="text"name=""id="ipt"placeholder="请输入内容"><buttonid="btn">点击发消息</button><script>const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    const box = document.querySelector('ul')

    /* 监听connect事件 */const socket = io('http://192.168.103.84:3009');
    socket.on('connect', () => {
      console.log('看到这里，表示和服务器连接上了')
    })

    /* 浏览器监听这个事件 */
    socket.on('message', (e) => {
      console.log('message', e, 8888)
    })

    btn.onclick = function () {
      console.log(1111);
      /* 发射一个Tom事件 并传递数据给服务器 */
      socket.emit('Tom', ipt.value)
    }

    // console.log(socket, 99);</script></body></html>

浏览器rose页面

<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-11-16 15:40:30
 * @LastEditors: voanit
 * @LastEditTime: 2022-11-16 16:20:13
--><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>rose</title><scriptsrc="https://cdn.socket.io/4.4.0/socket.io.min.js"></script><!-- <script src="https://cdn.socket.io/4.4.1/socket.io.esm.min.js"></script> --></head><body><ul></ul><inputtype="text"name=""id="ipt"placeholder="请输入内容"><buttonid="btn">点击发消息</button><script>const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    const box = document.querySelector('ul')

    /* 监听connect事件 */const socket = io('http://192.168.103.84:3009');
    socket.on('connect', () => {
      console.log('看到这里，表示和服务器连接上了')

    })

    /* 浏览器监听这个事件 */
    socket.on('message', (e) => {
      console.log('message', e, 8888)
      box.innerHTML = e.msg ? e.msg : e
    })

    socket.on('messageTom', (e) => {
      console.log('message', e, 8888)

      var li = document.createElement('li')
      li.innerHTML = e
      box.appendChild(li)
    })


    btn.onclick = function () {
      console.log(1111);
      /* 发射一个Tom事件 并传递数据给服务器 */
      socket.emit('Tom', ipt.value)
    }

    // console.log(socket, 99);</script></body></html>

以上实现的是：tom和rose实现聊天

tom: 点击按钮发射一个Tom事件并携带表单输入的值给服务器

服务器：监听Tom事件并发射事件messageTom以及携带Tom传过来的数据

rose :监听 messageTom事件即可不刷新页面就可以获取传过来的数据实现是数据实时更新