websocket实现聊天室(vue2 + node)

通过websocket实现简单的聊天室功能

需求分析如图:

搭建的项目结构如图:


前端步骤:

  1. vue create socket_demo (创建项目)
  2. views下面建立Home , Login组件
  3. 路由里面配置路径
  4. Home组件内部开启websocket连接

前端相关组件代码:
Login组件

javascript 复制代码
<!-- Login.vue -->
<template>
  <div>
    <input type="text" placeholder="请输入用户名" v-model="username">&nbsp;&nbsp;
    <button @click="enterRoom">进入聊天室</button>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      username: '',
    }
  },
  methods: {
    enterRoom() {
      let username = this.username.trim()

      if (username.length < 6) {
        alert('用户名小于6位,请重新输入!')
        return
      }
      // 保存用户名
      localStorage.setItem('username', username)
      // 进入首页
      this.$router.push('/')
    },
  }
}
</script>

<style>

</style>

Home组件

javascript 复制代码
<!-- Home.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in msgList" :key="item.id">
        <p>
          <span>{{item.user}}</span>
          <span>{{new Date(item.dateTime)}}</span>
        </p>
        <p>消息:{{item.msg}}</p>
      </li>
    </ul>
    <input type="text" placeholder="请输入消息" v-model="msg">&nbsp;&nbsp;
    <button @click="sendMsg">发送</button>
  </div>
</template>

<script>
let ws = new WebSocket('ws://localhost:8000')
export default {
  name: 'home',
  data() {
    return {
      msg: '',
      username: '',
      msgList: []
    }
  },
  mounted() {
    this.username = localStorage.getItem('username')
    if (!this.username) {
      this.$router.push('/login')
      return
    }
    ws.onopen = (e) => {
      console.log('WebSocket opne ', e);
    }
    ws.onclose = (e) => {
      console.log('WebSocket onclose ', e);
    }
    ws.onerror = (e) => {
      console.log('WebSocket onerror ', e);
    }
    // 接收服务端发送过来的消息
    ws.onmessage = (e) => {
      // console.log('WebSocket onmessage ', e);f
      let msg = JSON.parse(e.data)
      // console.log('msg', msg);
      this.msgList.push(msg)
    }

  },
  methods: {
    // 发送消息
    sendMsg() {
      if (!this.msg) {
        return
      }

      let obj = {
        id: Math.floor(Math.random() * 100),
        user: this.username,
        dateTime: new Date().getTime(),
        msg: this.msg
      }
      ws.send(JSON.stringify(obj))
      this.msg = ''
    },
  }

}
</script>

<style>

</style>

router/index.js

javascript 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

后端步骤:

  1. 在项目外层创建server文件夹(src目录同级)
  2. npm init -y创建安装包
  3. npm i ws (安装websocket的插件ws)
  4. index.js 文件内部开启服务,初始化相关事件

后端服务的启动 :server下面建立index.js文件,package.json里面配置命令,npm run dev启动

index.js文件

javascript 复制代码
const Ws = require('ws');

((Ws) => {
  // 开启服务
  const server = new Ws.Server({
    host: 'localhost',
    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', msg.toString());
    let message = msg.toString()
    // 获取所有和服务端连接的客户端,并向它们推送消息
    server.clients.forEach(c => {
      c.send(message)
    })
  }

  init()
})(Ws);

效果图:

相关推荐
智象科技9 分钟前
智象科技赋能金融、证券行业 IT 运维
大数据·运维·网络·数据库·科技·金融·智能运维
chian-ocean1 小时前
零基础入门:用C++从零实现TCP Socket网络小工具
网络·c++·tcp/ip
apihz2 小时前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
guts°3 小时前
10-ACL技术
网络·网络协议
群联云防护小杜3 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
2301_780789667 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
_丿丨丨_8 小时前
XSS(跨站脚本攻击)
前端·网络·xss
一只栖枝9 小时前
HCIA-Security 认证精讲!网络安全理论与实战全掌握
网络·web安全·网络安全·智能路由器·hcia·it·hcia-security
FileLink跨网文件交换9 小时前
文件摆渡系统十大软件|文件摆渡系统如何构建网络安全呢?
网络
晨欣12 小时前
大型语言模型(LLM)在网络安全中最具商业价值的应用场景(Grok3 回答 DeepSearch模式)
网络·web安全·语言模型