1.思路

新建两个项目:
第一个前端项目,搭建聊天室页面,同时使用Websocket API,与服务端进行通信
第二个项目,使用node环境,下载ws包,搭建服务

年前就发现下包有问题,年后老淘宝镜像已经崩了,完全用不了,现在改https://registry.npmmirror.com

2.前端代码

<template><div class="container"><div class="messageBox"></div><textarea class="message"></textarea><button class="send">发送</button></div>
</template>
<script>
export default {name: 'weChat',data () {return {}},mounted () {this.initWeChat()},computed: {},methods: {initWeChat () {const messageBox= document.querySelector('.messageBox')const textarea = document.querySelector('.message')const sendButton = document.querySelector('.send')// 生成WebSocket对象const ws = new WebSocket('ws://'改成你的ip':9001/ws')// 为WebSocket添加事件监听ws.addEventListener('message', function (event) {const div = document.createElement('div')const time = this.getTime()div.innerText = event.data+''+timemessageBox.append(div)})ws.addEventListener('open', () => {alert('websocket连接建立完毕')})sendButton.addEventListener('click', () => {// 发送消息ws.send(textarea.value)})},getTime () {const now = new Date()const year = now.getFullYear()const month = String(now.getMonth() + 1).padStart(2, '0')const day = String(now.getDate()).padStart(2, '0')const hour = String(now.getHours()).padStart(2, '0')const min = String(now.getMinutes()).padStart(2, '0')const second = String(now.getSeconds()).padStart(2, '0')return `${year}-${month}-${day} ${hour}-${min}-${second}`}}
}
</script>
<style lang='scss'  scoped>
//样式自己写去吧
</style>

3.node服务

// 导入WebSocket模块:
const WebSocket = require('ws')// 引用Server类:
const WebSocketServer = WebSocket.Server// 实例化:
const wss = new WebSocketServer({port: 9001,path: '/ws'
})const wsList = []// 监听创建连接事件，回调函数的参数是创建的连接
wss.on('connection', function connection (ws) {ws.on('error', console.error)// 监听该连接的接收信息事件ws.on('message', function message (data) {console.log('接收到信息: %s', data)for (const w of wsList) {if (w.readyState == w.OPEN) {w.send(data.toString())}}})wsList.push(ws)
})
//node wechat.js 启动服务

4.参考文档

1.mdn websocket文档
2.百度文档