介绍

websocket 是一个网络通信协议，类似于http 协议。

http协议通信只能由客户端发起，不能双向通信

在html中的测试代码

  // 通过 websocket 完成前后端通信
  // 1.建立链接
  var ws = new WebSocket('wss://javascript.info/article/websocket/demo/hello')
  // 2.监听链接成功
  ws.onopen = function (evt) {
    console.log('链接成功')
  }
  // 3.如何发消息
  document.querySelector('#btn').addEventListener('click', () => {
    ws.send('你好 WebSockets! 服务器')
  })
  // 4.如何接消息
  ws.onmessage = function (evt) {
    console.log('服务端发的消息: ' + evt.data)
    ws.close()
  }
  // 5.如何关闭
  document.querySelector('#btn2').addEventListener('click', () => {
    ws.send('你好 WebSockets! 服务器')
    ws.close()
  })
  // 6.监听通信关闭
  ws.onclose = function (evt) {
    console.log('链接关闭')
  }

使用liveServer预览

`socket.io-client` 使用

socket.io是基于websocket 的的即时通讯的解决方案，提供后端即时通信服务，前端连接后端 JS 库。

使用方式

启动socket.io服务

官方demo: 拷贝chat-example项目

git clone github.com/socketio/ch…

使用vscode打开
在index.js中添加配置项，防止出现跨域错误

const io = require('socket.io')(http, {cors: true});

2. 体验即时通信

安装依赖，运行chat-example

pnpm i

pnpm run start

预览网页

3. 客户端相关代码

// 建立连接
import io, { Socket } from 'socket.io-client'
let socket: Socket
// 参数1：不传默认是当前服务域名，开发中传入服务器地址 
// 参数2：配置参数，根据需要再来介绍
socket = io('http://localhost:3000') // socket 挂载在node服务里

onUnmounted(() => {
  socket.close()
})

// 确定连接成功
socket.on('connect', () => {
  console.log('连接成功')
})

// 发送消息
// chat message 发送消息事件，由后台约定，可变 
socket.emit('chat message', '消息内容')

// 接收消息
socket.on('chatMsgList', (res) => {
  console.log(res)
})

// 关闭连接
// 离开组件需要使用 
socket.close()

websocket入门介绍

介绍

socket.io-client 使用

使用方式

`socket.io-client` 使用