简单本地websocket运行实例（vue3）

目录

1.完善一下登陆页面，方便后续使用

2.具体实现vue页面

3.hooks文件夹建立，存放websocket设置

4.建立src的同级server文件夹，用于后端启动websocket服务

5.创建index.js文件，编写websocket代码

6.在server目录下，通过npm run dev运行后端代码

 7.效果展示

---

整体代码：

1.完善一下登陆页面，方便后续使用

2.具体实现vue页面

3.hooks文件夹建立，存放websocket设置

页面结构如图：

 index.js

import useWebSocket from './websocket'
export { useWebSocket }

 websocket.js

function useWebSocket(handleMessage){

  // websocket服务路径
  let url = 'ws://localhost:8000'
  const ws = new WebSocket(url)

  // 初始化
  const init=()=>{
    bindEvent()
  }

  // 方法绑定 见名思意
  function bindEvent(){
    ws.addEventListener('open',handleOpen,false)
    ws.addEventListener('close',handleClose,false)
    ws.addEventListener('error',handleError,false)
    ws.addEventListener('message',handleMessage,false)

  }

  function handleOpen(e){
    console.log('websocket open',e)
  }
  function handleClose(e){
    console.log('websocket close',e)
    
  }
  function handleError(e){
    console.log('websocket error',e)
    
  }

  init()

  return ws


}
export default useWebSocket;

4.建立src的同级server文件夹，用于后端启动websocket服务

先建立一个文件夹server，进入文件夹 cd server

结构如下：

 新开一个控制台：输入npm init -y 创建结构

npm init -y

 此时目录结构出来了：输入yarn add ws 引入websocket

yarn add ws

 修改server文件里的package.json文件

将如下代码覆盖原来的：

"dev": "nodemon index.js"

 如果没有nodemon  需要引入：npm install -g nodemon

npm install -g nodemon

5.创建index.js文件，编写websocket代码

const WebSocket = require('ws');

((Ws)=>{
  const server = new Ws.Server({port:8000})
  
  const init =()=>{
    bindEvent()
  }
function bindEvent(){
  server.on('open',handleOpen);
  server.on('close',handleClose);
  server.on('error',handleError);
  server.on('connection',handleConnection);
}

function handleOpen(){
  console.log('websocket open')

}
function handleClose(){
  console.log('websocket close')
  
}
function handleError(){
  console.log('websocket error')
  
}
function handleConnection(ws){
  console.log('websocket connection')
  ws.on('message',handleMessage)
}
// 接受的 前端传入的信息 在进行广播
function handleMessage(msg){
  console.log(msg.toString())
  server.clients.forEach((c)=>{
    c.send(msg.toString())
  })

}

init()

})(WebSocket);

6.在server目录下，通过npm run dev运行后端代码

启动如图：

 7.效果展示

由于是本地，多用户实现不方便，所以可以复制网址，再开一个页面，重新登陆进来，此时，有两个页面，第一次登陆的不要刷新，因为此时用户信息已经是用户2的了

 

 

 

 用户1发消息：

 此时用户2 ：收到信息，再回复

 一个简单了websocket通信就完成了