使用node.js模拟Socket聊天

什么是Socket

• 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
• 简单的来说就像微信发消息能够随时得到聊天的信息
  文档连接
  w3c文档

简单的demo

• 下载需要的包
  这个用cnpm下载有时会出错

npm init -y
npm install express --save
npm install socket.io

node.js

var express = require('express');
var app = express()
// 创建静态资源目录
app.use('/', express.static('public'))
var http = require('http').createServer(app);
var io = require('socket.io')(http);


// 当有人连接时触发=》上线
io.on('connection', function (socket) {

  // 接收传入的用户名
  let { nickname } = socket.handshake.query

  console.log(nickname + '已连接');
  //   事件广播 定义事件告诉页面有人上线了
  socket.broadcast.emit('online', nickname + '上线了')

// 这里触发，前台监听
  // 其他用户发的信息触发
  socket.on('chat', msg => {
    // 定义事件将其他用户昵称，信息，时间传过去 通过转成json字符串传递
    socket.broadcast.emit('chat', JSON.stringify({ nickname, msg, time: new Date().toLocaleTimeString() }))
  })

  //   下线触发
  socket.on('disconnect', () => {
    console.log('一个用户下线了')
  })
});

http.listen(3000, function () {
  console.log('listening on *:3000');
});

• 创建静态资源目录
  
  index.html中

js内容

	<!-- 引入socket.io.js -->
    <script src="./js/socket.io.js"></script>
	data() {
                return {
                    msg: '',
                    socket: null,
                    contentlist: [],
                    nickname: ''
                }
            },
            methods: {
                faSong() {
                    // 判断一下内容是否为空
                    if (!this.msg) {
                        alert("内容不能为空")
                    } else {
                        this.socket.emit('chat', this.msg)
                        this.contentlist.push(`<span class="mine">${this.msg}</span>`)
                        this.msg = ''
                    }

                },
                login() {
                    // 将昵称传到后台 携带查询参数
                    this.socket = io("http://localhost:3000/?nickname=" + this.nickname);

                    // 监听到后台定义的事件 上线信息
                    this.socket.on('online', msg => {
                        this.contentlist.push(`<br>${msg}`)
                    })
                    // 监听其他人发送的信息 将json字符串转成json对象
                    this.socket.on('chat', data => {
                        data = JSON.parse(data)
                        this.contentlist.push(`${data.nickname}&nbsp;:&nbsp;&nbsp;<span class="others">${data.msg}</span>`)
                    })
                }
            },

HTML内容

<div id="app" v-cloak>
        <input type="text" v-model="nickname" placeholder="请输入用户名">
        <button @click="login">登录</button><br>
        <textarea v-model="msg" cols="30" rows="10"></textarea>
        <br>
        <button @click="faSong">发送</button>
        <hr>
        <div>
            <div style="width: 500px;position: relative;height: 30px;margin-bottom:  10px;" v-for="item in contentlist" v-html="item"
                class="chat"></div>
            <div></div>
        </div>
    </div>