脚本宝典收集整理的这篇文章主要介绍了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)
})

脚本宝典总结

以上是脚本宝典为你收集整理的socket.io + vue.js 简易聊天室全部内容，希望文章能够帮你解决socket.io + vue.js 简易聊天室所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。