vue和socket.io开发简单web聊天室

2019独角兽企业重金招聘Python工程师标准>>>

效果预览 https://www.wangchunjian.top/chat.html

需要用到的库

1. https://socket.io/
2. https://muse-ui.org/#/zh-CN
3. https://cli.vuejs.org/

server端

socket建立长连接,接收并向所有建立连接的client推送消息

笼统的讲就是on接收客户端消息,emit向客户端发送消息，详细请移步https://socket.io/

var app = require('express')();
var fs = require('fs');
var privatekey = fs.readFileSync('/www/wdlinux/nginx/conf/cert/www.wangchunjian.top.key', 'utf8');
var certificate = fs.readFileSync('/www/wdlinux/nginx/conf/cert/www.wangchunjian.top.pem', 'utf8');
var options={key:privatekey, cert:certificate};
var https = require('https').Server(options,app);
var io = require('socket.io')(https);
var _ = require('lodash');
let users=[];

app.get('/', function(req, res){
  res.send('
Hello world
');
});

io.on('connection',function(socket){

  socket.on('chat loading',function(msg){
    var findIndex=_.findIndex(users,function(o){return o.chatUserId==msg.chatUserId;});
    socket.chatUserId=msg.chatUserId;
    console.log(findIndex);
    if(findIndex<0){
      users.push({chatUserId:msg.chatUserId,nickname:msg.nickname});
      socket.broadcast.emit('tooltip',msg.nickname+' join..');
    }
    io.emit('onlines',users);
  });


  socket.on('chat message', function(msg){
    var findIndex=_.findIndex(users,function(o){return o.chatUserId==msg.chatUserId;});
    if(findIndex<0){
      users.push({chatUserId:msg.chatUserId,nickname:msg.nickname});
      socket.broadcast.emit('tooltip',msg.nickname+' join..');
      io.emit('onlines',users);
    }
		io.emit('chat message',msg); 
	});

  socket.on('nickname', function(msg){
    var findIndex=_.findIndex(users,function(o){return o.chatUserId==msg.chatUserId;});
    if(findIndex<0){
      users.push(msg);
      socket.broadcast.emit('tooltip',msg.nickname+' join..');
    }else{
      users[findIndex]=msg;
    }
    io.emit('onlines',users);
  }); 

  socket.on('disconnect', function(){
      var findIndex=_.findIndex(users,function(o){return o.chatUserId==socket.chatUserId;});
      var leaveUser=users[findIndex];
      if(findIndex>-1){
        socket.broadcast.emit('tooltip',leaveUser.nickname+' leave..');
        users.splice(findIndex,1);
        socket.broadcast.emit('onlines',users);
      } 
	});
});

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

client端

/views/Chat.vue引入的一些库

import 'muse-ui-message/dist/muse-ui-message.css';
import Vue from 'vue';
import Message from 'muse-ui-message';
import Toast from 'muse-ui-toast';

var myMarked = require('marked');
import 'highlight.js/styles/github.css';
// Set options
// `highlight` example uses `highlight.js`
myMarked.setOptions({
  renderer: new myMarked.Renderer(),
  highlight: function(code) {
    return require('highlight.js').highlightAuto(code).value;
  },
  pedantic: false,
  gfm: true,
  tables: true,
  breaks: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false
});

Vue.use(Message);
Vue.use(Toast,{position:'top'});

import docCookies from './../cookies'
import io from 'socket.io-client';

const uuidv1 = require('uuid/v1')
const socket = io('https://www.wangchunjian.top:3000');
let chatUserId='';
let nickname='匿名';

if(docCookies.hasItem('chatUserId')){
    chatUserId=docCookies.getItem('chatUserId');
}else{
    chatUserId=uuidv1();
    docCookies.setItem('chatUserId',chatUserId,Infinity);
}

if(docCookies.hasItem('nickname')){
    nickname=docCookies.getItem('nickname');
}

/views/Chat.vue里处理Vue事件和属性的代码

/views/Chat.vue template 部分

main.js 入口

import Vue from 'vue'
import Chat from './views/Chat.vue'
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

Vue.use(MuseUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(Chat)
}).$mount('#app')

index.html 文件

转载于:https://my.oschina.net/wcj2020/blog/1932576