socket.io + vue.js 簡易聊天室

本文主要分享一個簡易版的聊天室

項目地址

https://github.com/zuank/socket

測試地址

http://yuehao.duapp.com/chat/

服務端配置

開啓服務

const server = app.listen(port, () => {
  console.log(`technode is on port ${port} |`);
});

接入socket.io

const io = require('socket.io').listen(server);

socket配置

socket.emit 爲廣播

socket.broadcast.emit 爲廣播給其餘用戶

io.sockets.on('connection', (socket) => {
  socket.on('set nickname', (name) => {
    socket.nickname = name;
    socket.broadcast.emit('new user', {
      nickname: name,
      type: 'user',
    });
    socket.emit('login', {
      nickname: name,
      id: socket.id,
    });
  });
  socket.on('new dialog', (str) => {
    io.emit('new dialog', {
      value: str,
      nickname: socket.nickname,
      type: 'dialog',
    });
  });
});

前端配置

鏈接服務端

var socket = io.connect('/')

向服務端發送信息

socket.emit('set nickname', this.username)

接收來自服務端的信息

socket.on('new user', function(data) {
  console.log(data)
  app.messagelist.push(data)
})