简单本地websocket运行实例（vue3）-Toy模板网

这篇具有很好参考价值的文章主要介绍了简单本地websocket运行实例（vue3）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

2.具体实现vue页面

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

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

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

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

7.效果展示

整体代码：

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

<template>
  <div>
    <div class="content">
      <div class="loginForm">
        <div class="form-item-title">
          登录
        </div>
        <div class="form-item">
          <span>用户名</span>
          <input type="text" placeholder="输入用户名" v-model="userName" />
        </div>
        <div class="form-item">
          <span>密码</span>
          <input type="text" placeholder="输入密码" v-model="password" />
        </div>
        <div class="form-item-btn">
          <button class="form-item" @click="goPage()">进入聊天室</button>
        </div>
       
      </div>
     
    </div>
  </div>
</template>

<script setup >
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userName = ref('')
const password = ref('')

// 跳转页面
const goPage = () => {
  const _username = userName.value.trim()
  const _password = password.value.trim()

  if (_username.length < 6) {
    alert('用户不小于6位')
    return
  }
  if(_username !== _password){
    alert('密码错误!')
    return
  }
// 储存本地用户信息
  localStorage.setItem('userName', _username)
  userName.value = ''
  password.value = ''
  router.push('home')
}

// 页面加载时检测
onMounted(() => {
  userName.value = localStorage.getItem('userName')
  if (userName.value) {
    router.push('/')
    return
  }

})

</script>

<style >
.content {
  width: 1000px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
}
.loginForm{
  display: flex;
  flex-direction: column;
}
.form-item-title{
  font-size: 25px;
  display: flex;
  justify-content: center;
}
.form-item{
  display: flex;
margin-top: 20px;
}
.form-item span{
  flex: 1;
}
.form-item-btn{
  display: flex;
  justify-content: center;
}
</style>

2.具体实现vue页面

<template>
  <div>
    <span>当前用户：{{ userName }}</span>
    <div class="content">
      <div class="msg-box">
        <ul>
          <li v-for="item of state.msglist" :key="item.id" :class="item.user === userName ? 'msg-whoSend' : ''">
            <div>
              <span>
                {{ item.user }}
              </span>
              <span>
                {{ new Date(item.dateTime) }}
              </span>
            </div>
            <div class="msg-other" :class="item.user === userName ? 'my-send-msg-box' : ''">
              <div class="my-send-msg-bgc my-send-msg" >
                <span>
                {{ item.msg }}
              </span>
              </div>
             
            </div>
          </li>
        </ul>
      </div>
      <div class="msg-send">
        <textarea type="textarea" placeholder="输入消息" v-model="state.inputMessage"></textarea>
        <button class="form-item" @click="sendMessage">发送</button>
      </div>

    </div>
  </div>
</template>

<script setup >
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useWebSocket } from '@/hooks/index';
// 引入 websocket
const ws = useWebSocket(handleMessage)
const router = useRouter()
// 接收服务器端的 messageList
function handleMessage(e) {
  const msgData = JSON.parse(e.data)
  state.msglist.push(msgData)
}


const state = reactive({
  inputMessage: '',
  msglist: []
})
const userName = ref('')

// 页面加载时检测是否登录，目前没有写路由守卫，后期迁移到守卫里
onMounted(() => {
  userName.value = localStorage.getItem('userName')
  if (!userName.value) {
    router.push('/')
    return
  }
})

// 发送信息
const sendMessage = () => {
  const msg = state.inputMessage
  if (!msg.trim().length) {
    return
  }
  ws.send(JSON.stringify({
    id: new Date().getTime(),
    user: userName.value,
    dateTime: new Date().getTime(),
    msg: state.inputMessage
  }))

  state.inputMessage = ''
}

// 检测 消息列表，将展示页面滚动条到底
watch(state.msglist,()=>{
  const msgBox = document.querySelector('.msg-box');
  setTimeout(() => {
    msgBox.scrollTop = msgBox.scrollHeight;
  }, 100);

})
</script>

<style >
ul {
  list-style: none;
}

.content {
  width: 1400px;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  margin: 10px auto;
  border: 1px solid #000;
}

.msg-box {
  height: 550px;
  width: 100%;
  overflow: auto;
  border-bottom: 1px solid #000;
}

.msg-box ul li {
  margin-top: 20px;
}

.msg-box .msg-whoSend {
  text-align: end;
  display: flex;
  flex-direction: column;
}
.msg-other{
  display: flex;
margin-top: 10px;
}
.my-send-msg-box{
  justify-content: end;
}
.my-send-msg{
  max-width: 700px;
  word-wrap: break-word;
}
.my-send-msg-bgc{
      border-radius: 10px;
    padding: 10px;
  background-color: #95ec69;
}

.msg-send {
  width: 100%;
  height: 200px;
  position: relative;
}

.msg-send textarea {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.msg-send button {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 20px;
}</style>

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

页面结构如图：

vue3 websocket,vue项目框架搭建/添加,websocket,javascript,vue.js

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

结构如下：

vue3 websocket,vue项目框架搭建/添加,websocket,javascript,vue.js

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

npm init -y

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

yarn add ws

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

将如下代码覆盖原来的：

"dev": "nodemon index.js"

vue3 websocket,vue项目框架搭建/添加,websocket,javascript,vue.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);