微信小程序demo：基于websocket的微信聊天室小程序

柿霖不是林 · 发表于 2017-3-23 11:33:32

[mw_shl_code=html,true]// room.js
// var util = require('../../utils/util.js')
var WxParse = require('../../wxParse/wxParse.js');
var roomConfig = {
  wsurl: 'wss://yourdomain.com/ws',
  nickname: Math.random().toString(36).substr(2, 4),
  channel: 'wx',
}
var mynickname = roomConfig.nickname;
var online = [];
var initMsg = '<i class="msg info">☼ Welcome ~ </i>\n';
var extraMsgs = [];
var socketOpen = false;
var socketMsgQueue = [{cmd: 'join', channel: roomConfig.channel, nick: roomConfig.nickname }];
var parseHtml = function (text) {
  //html = html.replace(/<a.+?href="(.+?)".*?>(.+?)<\/a>/ig,'$2');
  text = text.replace(/(https?:\/\/[^\s]+)/g, function (link) {
return '<a href="' + link + '">网址</a> \n';
  });
  return text;
};

Page({
  data: {
scrollTop: 1000000000000,
boxHeihgt: 400,
inputValue: '',
messages: ''
  },
  bindKeyInput: function(e) {
this.setData({
   inputValue: e.detail.value
})
  },
  sendBtn: function () {
this.sendMsg(this.data.inputValue)
this.setData({
   inputValue: ''
});
  },
  sendMsg: function (msg) {
wx.sendSocketMessage({
   data: JSON.stringify({cmd: 'chat', text: msg})
});
  },
  getMsg: function(data) {

var args = JSON.parse(data);
//Chat
if (args.cmd === 'chat') {
   if (args.trip == undefined) {
      args.trip = "(No trip)";
   }
   var isMe = '';
   if (args.nick == mynickname.split("#")[0]) {
      isMe = ' me';
   }
   // extraMsgs.push("\n" + "\033[F" + args.trip + " " + args.nick + ": " + args.text);
   extraMsgs.push('<div class="msg chat'+isMe+'">◦<em class="nick">'  + args.nick + ":</em> " + args.text +'</div>');
   console.log(args);
}

//Messages Process
switch (args.cmd) {
   case 'warn':
      if (args.text === "Nickname taken") {
      extraMsgs.push('<div class="msg info">'+ args.text + '</div>');
      return false;
      }
      console.log("Your IP is being rate-limited or blocked.");
      break;
   case 'onlineSet':
      for (var i = 0; i < args.nicks.length; i++) {
         online.push(args.nicks);
      }
      extraMsgs.push("\n" + '<div class="msg info">当前在线（'+online.length+'）: ' + online + '</div>');
      break;
   case 'onlineAdd':
      online.push(args.nick);
      extraMsgs.push('<div class="msg info"><em class="nick">'+ args.nick +  '</em> 进入了大厅</div>');
      break;
   case 'onlineRemove':
      var x = online.indexOf(args.nick);
      if (x != -1) {
         online.splice(x, 1);
         extraMsgs.push('<div class="msg info"><em class="nick">'+ args.nick + '</em> 离开了大厅</div>');
      }
      break
   default:
}

this.setData({
   messages: initMsg + extraMsgs.join('\n')
});

this.setData({scrollTop:this.data.scrollTop+100});

WxParse.wxParse('messages', 'html', parseHtml(this.data.messages), this, 5);

  },
  onLoad: function () {
var that = this;

wx.getSystemInfo({
   success: function(res) {
      that.setData({
      boxHeihgt: res.windowHeight-90
      })
   }
});
wx.connectSocket({
   url: roomConfig.wsurl
});

wx.onSocketOpen(function(res) {
   console.log('WebSocket连接已打开！')
   socketOpen = true
   for (var i = 0; i < socketMsgQueue.length; i++){
      sendSocketMessage(socketMsgQueue)
   }
   socketMsgQueue = []
});

function sendSocketMessage(msg) {
   if (socketOpen) {
      wx.sendSocketMessage({
      data: JSON.stringify(msg)
      })
   } else {
      socketMsgQueue.push(msg)
   }
};

wx.onSocketMessage(function(res) {
   // console.log('收到服务器内容：' + res.data)
   that.getMsg(res.data)
});

setTimeout(function() {
   wx.sendSocketMessage({
      data: JSON.stringify({cmd: 'ping'})
   });
   console.log(101);
}, 50000);

  }
})[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

dragonfang · 发表于 2017-3-23 21:16:28

这个有点意思哦，可以看看再回复

kingshop · 发表于 2017-3-27 23:18:45

学习666666

caizhengye · 发表于 2017-3-28 10:28:27

哈哈！66

FisherMan · 发表于 2017-3-28 12:58:29

确实是难得好帖啊，顶先

大臣小小 · 发表于 2017-4-1 23:26:34

啥也不说了，感谢楼主分享哇！

殇丶歌 · 发表于 2017-4-5 09:39:10

如果我想做个能跳转到指定账号的小程序，是不是很难啊

俄罗斯伯马西 · 发表于 2017-4-7 09:43:31

确实是难得好帖啊，顶先

|̲̅S̲̅V̲̅ · 发表于 2017-4-25 00:33:47

正需要，支持楼主大人了！

-ZINO · 发表于 2017-4-25 03:43:04

正需要，支持楼主大人了！

		自动登录	找回密码
密码			立即注册

微信小程序demo：基于websocket的微信聊天室小程序

本帖子中包含更多资源