Vue+Nodejs 使用WebSocket创建一个简易聊天室

文章目录

一、页面效果

二、架构流程

使用vue编写前端页面,nodejs处理服务端消息,WebSocket进行实时通信

三、技术细节

1.客户端

javascript 复制代码
<template>
    <div>
        <form onsubmit="return false">
            <textarea  id="responseTest"  style="width: 500px; height: 300px"  ></textarea>
            <br />
            <input  type="text"  name="message"  style="width: 300px"  :value="inputVal"  @input="input"  />
            <input type="button" value="发送消息" @click="send(inputVal)" />
            <input type="button" value="清空聊天记录" @click="clean" />
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
          inputVal: '欢迎来到二二得四的聊天室',
          socket:null
        }
    },
    methods: {
        testWebsocket() {
            if (!window.WebSocket) {
                window.WebSocket = window.MozWebSocket
            }
            if (window.WebSocket) {
                this.socket = new WebSocket('ws://localhost:8088/ws')
              this.socket.onmessage = function (event) {
                    var ta = document.getElementById('responseTest')
                    ta.value = ta.value + '\n' + event.data
                }
              this.socket.onopen = function (event) {
                    var ta = document.getElementById('responseTest')
                    ta.value = '连接开启!'
                }
                this.socket.onclose = function (event) {
                    var ta = document.getElementById('responseTest')
                    ta.value = '连接关闭!'
                }
            } else {
                alert('你的浏览器不支持WebSocket')
            }
        },
        input(e) {
            this.inputVal = e.detail.value
        },
        clean() {
            document.getElementById('responseTest').value = ''
        },
        send(message) {
            if (!window.WebSocket) {
                return
            }
          if (this.socket.readyState === WebSocket.OPEN) {
              this.socket.send(message)
            } else {
                alert('连接没有开启')
            }
        },
    },
    mounted() {
        this.testWebsocket()
    },
}
</script>

<style></style>

2. 服务端

使用的是nodejs

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

const webserve = new ws.Server({port:8088})

//打开WebSocket服务器:通过监听open事件打开服务器
webserve.on('open',function open() {
    console.log('connected')
})

//关闭WebSocket服务器:通过监听close事件关闭服务器
webserve.on('close',function close() {
    console.log('disconnected')
})

//监听连接:ws通过connection事件来监听连接
webserve.on('connection',function connection(res,req) {
    const ip1 =  req.headers['x-forwarded-for'] || req.socket.remoteAddress
    const port1 = req.socket.remotePort
    const clientName = ip1+port1
    console.log('连接已开启,开始发送消息')

    // 发送数据:ws通过send()方法来发送到客户端数据
    // res.send('welcome,'+clientName)

  //接收数据:ws通过message事件来接收数据。当客户端有消息发送给服务器时,服务器就能够触发该消息
    res.on('message',function incoming(message) {
        console.log('received: %s from %s',message,clientName)

        /**
         * 准备的状态:ws中WebSocket类具有以下4中准备状态
         * 1、CONNCETION:值为0,表示连接还没有打开
         * 2、OPEN:值为1,表示连接已经打开,可以通信了
         * 3、CLOSING:值为2,表示连接正在关闭
         * 4、CLOSED:值为2,表示连接已经关闭
         */
        webserve.clients.forEach(function each(client) {
            if(client.readyState === ws.OPEN){
                client.send(message.toString())
            }
        })
    })
})
相关推荐
abigale037 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者27 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile31 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399733 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊39 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火39 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app