WebSocket ：实现聊天室功能

Vue2 的实现方法

<template>
  <div class="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item.user }}</span>
        <span>聊天信息：{{ item.msg }}</span>
      </li>
    </ul>
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <input type="text" v-model="message" placeholder="请输入信息" />
    <button @click="sendmsg">点击发送</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      username: "",
      message: "",
      list: [],
      ws: "",
    };
  },
  mounted() {
    var this2 = this; //记录this指向
    this.ws = new WebSocket("ws:localhost:3000"); //和这个端口建立连接
    //监听
    this.ws.addEventListener(
      "open",
      function () {
        console.log("websocket建立连接");
      },
      false
    );
    //接收数据
    this.ws.addEventListener(
      "message",
      function (e) {
        console.log("接收数据");
        const message = JSON.parse(e.data)
        this2.list.push(message)
      },
      false
    );
  },
  methods: {
    sendmsg() {
      this.ws.send(
        JSON.stringify({
          user: this.username,
          msg: this.message,
        })
      );
    },
  },
};
</script>

React 的实现方法

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      message: '',
      list: [],
      ws: ''
    }

  }
  componentDidMount() {
    var this2 = this
    this.ws = new WebSocket("ws:localhost:3000")
    this.ws.addEventListener(
      "open", function () {
        console.log("建立连接");
      }, false
    )
    //监听
    this.ws.addEventListener(
      "message", function (e) {
        console.log("接收数据");
        const message = JSON.parse(e.data)
        this2.setState({
          list: [...this2.state.list, message]
        })
      }
    )
  }
  //发送
  sendmsg = () => {
    this.ws.send(
      JSON.stringify({
        user: this.state.username,
        msg: this.state.message
      }))
  }
  //处理用户名函数
  inpFn1 = (e) => {
    this.setState({
      username: e.target.value
    })
  }
  //处理信息函数
  inpFn2 = (e) => {
    this.setState({
      message: e.target.value
    })
  }
  render() {
    return (
      <div>
        <ul>
          {
            this.state.list.map((item, index) => (
              <li key={index}>
                <span>{item.user}:</span>
                <span>{item.msg}</span>
              </li>
            ))
          }
        </ul>
        <input type="text" value={this.state.username} onChange={this.inpFn1} placeholder='请输入用户名' />
        <input type="text" value={this.state.message} onChange={this.inpFn2} placeholder='请输入信息' />
        <button onClick={this.sendmsg}>点击发送</button>
      </div>
    )
  }
}
export default App

后端接口：一定要同时开启前后端接口

// 第一步 先引入websocket的包
const Websocket = require('ws')
// 第二步 new 出来一个超能力的 wss    给它传入一个参数{port:3000}
var wss = new Websocket.Server({port:3000})
wss.on('connection', ws => {
  //服务器监听消息事件  on  监听客户端给服务端
  ws.on('message', msg => {
    console.log('服务器收到' ,msg)
    // websocketclients服务器 forEach 遍历此时链接的电脑 ，c=computer 
    wss.clients.forEach((c)=>{
      c.send(msg)
    })
    // ws.send(msg)
  })
  // send   服务端给客户端放
})