なんちゃって slack clone

概要

slack cloneを作ってみた。

出来る事

• リアルタイム　チャット

できないこと

• 認証
• チャンネル
• ダイレクトメッセージ
• スレッド
• ワークスペース
• データの永続化

写真

利用したライブラリー、サービス

フロントエンド

• plunkerに設置
• フレームワークは、vue
• UIは、tailwind

通信

• websocket

バックエンド

• node-red
• enebularでedit
• herokuに設置

flow

サンプルコード

var url = "wss://.herokuapp.com/pub";
var ws = null;
var app = new Vue({
	el: '#app',
	data: function() {
		return {
			id: "",
			message: "",
			messages: [{
				"msg": "message",
				"id": "123",
				"time": "11:46"
			}]
		}
	},
	methods: {
		onMessage: function(e) {
			var json = JSON.parse(e.data);
			this.messages.unshift({
				"msg": json.msg,
				"id": json.id,
				"time": this.getTime()
			});
		},
		onError: function(e) {
			alert("接続に失敗しました。やり直してください。");
		},
		onClose: function(e) {
			//alert("close");
			ws = null;
			setTimeout("app.open()", 3000);
		},
		open: function() {
			if (ws == null)
			{
				ws = new WebSocket(url);
				ws.onopen = this.onOpen;
				ws.onmessage = this.onMessage;
				ws.onclose = this.onClose;
				ws.onerror = this.onError;
			}
		},
		onOpen: function(e) {
			//alert("接続しました。");
		},
		send: function(msg) {
			ws.send(JSON.stringify({
				'msg': msg,
				'id': this.id
			}));
		},
		getUniq: function() {
		  var strong = 10000;
  		return Math.floor(strong * Math.random()).toString(16) 
		},
		keypress: function() {
			if (this.message == "")
			{
				return;
			}
			this.send(this.message);
			this.message = "";
		},
		getTime: function() {
			return new Date().toTimeString();
		}
	},
	mounted: function() {
		this.id = this.getUniq();
		this.open();
	}
});

以上。