2011년 8월 2일 회의
Weechat(가칭)서비스 사용자 시나리오 | 내부 동작 시나리오 |
내가 Twitter.com 의 ID로 weechat 사이트에 로그인한다. 나의 follower, following 들이 화면에 social graph형태 (node, link)로 출련된다.
Q) Social Graph 가 어떻게 출력 되는것이 좋을까? 1. Fill Color 2. Circle Size 3. Line Color 4. Line Thickness 5. Line Length http://apps.facebook.com/socgraph/ http://www.touchgraph.com/navigator
| oauth연동 twitter연동 twitter상의 관계정보를 flock DB 저장 HTML5를 이용한 그래프 출력 ( (social graph방식 - 친밀도에 따라 사진을 더 크게 출력 또는 qwiki.com의 이미지 구성 방식)
|
graph에서 특정 node를 클릭하면 그사람과의 채팅창이 생성되고, 대화를 시작할 수 있다.
사용자간의 친밀도에 따라 node사인의 거리 또는 node의 크기가 달라질 수 있다. (필수아님) -
Q) 채팅창이 어떻게 생성되는 것이 좋을까? 1. Facebook, Google Chat 2. New chatting window
→ new chat window 가 좋을 것 같음. PC에서는. 일단 PC용으로 구현. 폰에서는 어떻게 보이는지 추후 확인. - | 채팅서버 동작, 대화내역은 memcached 서버에 저장 대화진행중일때는 채팅서버내에 메모리에 대화 저장. 대화가 새로 개시될때는 cache서버에서 다시 읽어온다. cache서버에 있는 대화를 disk에 백업하는 서버 모듈도 별도로 실행되고 있다. (mongoDB ? redis ?) |
채팅창에 들어간다. 기존 대화 내역이 화면에 보인다. (100줄) Q) 채팅에서 지원되는 기능은 어디까지 구현? 1. 문자 2. 사진 3. 파일 4. 음성 . | 채팅기능 websocket기반 구현 IE브라우저는 flash 기반 |
Design 시안
1. Main Page
![](https://lh5.googleusercontent.com/1MZqMKVFDkogUnuU_O0NGLCpqya0CVSTE0h1ayeonUH2zQYepMAwESd4QqjINA7LpDv0_5G-CQQQTRYjKHo59Y7l7X2kVcjSKupNLAg6QGGBWMWwBNA)
2. User Page
![](https://lh4.googleusercontent.com/QxBvM1LkVXs--jHkNYQ2K3ks0dLyIe7c5E7CPZqN2jXVIi19TXYUCyhniGBblGUd5KUy5ohchYvhpsfsJZvp2uYyqXldYZR-G306ZlZrcC1KM71nLTc)
우리시스템구성
HAProxy, apache,
memcached,
flockDB,
mongoDB
google File system -- Hadoop FS
bigtable -- Hbase
20110802 박정민:
채팅창 생성 방법: 기본적으로 페이지 내부 채팅 창이 있고, 버튼을 누르면 새로운 창으로 띄울 수도 있도록 하는 것이 좋을 것 같습니다.
Social graph 출력은 다른 사이트에서 그대로 벤치마킹하는 것이 좋을 것 같습니다.
그리고 사람을 찾기 편하도록 그래프 위에 검색 기능을 넣는 것이 좋아보입니다.
(구글에서 검색어를 입력하면 실시간으로 검색되는 것 처럼 검색창에 검색어를 입력하면 graph가 움직이면서 제일 가까운 결과를 찾고, 그 옆에 검색 결과를 리스트 형태로도 같이 보여주는 것도 좋을 것 같습니다.
검색시 그래프가 움직이면서 검색하는 것은 만들기 어려울 것 같기도 한데, 만약 힘들다면 검색 결과에 따라 유사도가 높은 결과 순으로 색을 사용해 표시하는 것도 좋을 것 같습니다.
채팅에서 지원되는 기능 구현: 일단 문자와 사진까지는 구현하는 것이 좋을 것 같고, 파일과 음성은 제일 나중에 시간이 남을 경우 하는 것이 좋을 것 같습니다. 사진 공유 기능을 구현하면 파일 공유 기능을 만드는 것도 어렵지는 않겠지만 음성은 좀 힘들어 보입니다.
20110804 서보경:
채팅창 생성 방법: 기본적으로 페이지 내부 채팅 창이 있고, 버튼을 누르면 새로운 창으로 띄울 수도 있도록 하는 것이 좋을 것 같습니다.
Social graph 출력은 다른 사이트에서 그대로 벤치마킹하는 것이 좋을 것 같습니다.
그리고 사람을 찾기 편하도록 그래프 위에 검색 기능을 넣는 것이 좋아보입니다.
(구글에서 검색어를 입력하면 실시간으로 검색되는 것 처럼 검색창에 검색어를 입력하면 graph가 움직이면서 제일 가까운 결과를 찾고, 그 옆에 검색 결과를 리스트 형태로도 같이 보여주는 것도 좋을 것 같습니다.
검색시 그래프가 움직이면서 검색하는 것은 만들기 어려울 것 같기도 한데, 만약 힘들다면 검색 결과에 따라 유사도가 높은 결과 순으로 색을 사용해 표시하는 것도 좋을 것 같습니다.
채팅에서 지원되는 기능 구현: 일단 문자와 사진까지는 구현하는 것이 좋을 것 같고, 파일과 음성은 제일 나중에 시간이 남을 경우 하는 것이 좋을 것 같습니다. 사진 공유 기능을 구현하면 파일 공유 기능을 만드는 것도 어렵지는 않겠지만 음성은 좀 힘들어 보입니다.
20110805 ~~~ :
Webpage Overall Architecture :
Contact to us (contactus.html) -datail : Show in all web pages, when users click this icon or hyperlink, they can email to us. |
Contents frame 1. login_page (login.html) Before log in, login_page will show you in this frame.
2. user_page (user.html) After log on, user_page will show up in this area. |
Information bar (information.html) -detail : Show in all web pages, Include information about us like what we use open source library like twitter |
- weechat web page architecture and components-
20110805 ~~~~~:
파일은 사용자가 컴퓨터에 저장하지만 사진은 채팅 화면에 바로 표시된다는 점이 다른데,
생각해보니 그냥 파일 전송 기능만 만들고 전송한 파일이 사진일 경우에 따로 처리하는 것이 낫겠네요.
monggo DB
mongo db 서버 기동 여부 확인
# ps -ef | grep mongo
python에서
import pymongo
http://api.mongodb.org/python/1.11/
mongo db 테스트
>>> import pymongo
>>> from pymongo import Connection
>>> connection = Connection()
>>> db = connection.xxxx
print db.hello
table = db.hello
print table
table.insert({"name":"han", "age":10})
table.find_one()
table.find_one({"name": "han"})
c=table.find({"age": 10})
for cc in c:
print cc
table.find_one({“name”:”bokyung”})
tweepy (twitter API, python)
tweepy 테스트
# python tweepy_test.py
http://twitter.com/oauth/authorize?oauth_token=YddUEeNouPkXXcwlfc2QmHgE501aGvXUbyqiQpA
tweepy_test2.py
29 CONSUMER_KEY = "lj1tenUgCtXJUnfmvN7PWA"
30 CONSUMER_SECRET = "DBYk5Qdnew9nnye9JFD5KlI4cCbueunRPzJBo"
31
32 auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
33 aurl = auth.get_authorization_url()
34 print aurl
35
36 #auth.get_access_token(verifier)
37 key = "102303698-y239qrJn6EJ8RrTw9fBJfUXuXJslpB3tizolftPM"
38 secret = "t7du471eI75nxMlwn5idZ14yihCF8zNt9mNhijep8"
39 auth.set_access_token(key, secret)
40
41 api = tweepy.API(auth)
42 api.update_status(u"a tweet by tweepy module")
http://answers.oreilly.com/topic/2605-how-to-capture-tweets-in-real-time-with-twitters-streaming-api/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+oreilly%2Fnews+%28O%27Reilly+News+and+Commentary%29
dev.twitter.com
--------------
weechat 서버의 mongDB table 정의
db.weechat.users = {
‘id’: 123456
‘screen_name’: ‘twitter_name(xxxx)’,
‘name’: ‘이름’,
‘imgurl’: ‘http://a0.twimg.com/profile_images/772043698/SKT______normal.jpg’
}
table = db.weechat.users
table.insert({‘id’: 123456, ‘screen_name’: ‘xxxx’})
db.weechat.relations =
{
"id":me.id,
"flist": flist
"updated_at": int(time.time())
}
table = db.weechat.followers
print table
# 각 유저의 Twitter친구 목록:
# 본인 id, [ (친구 id , 친구 screen_name, 친구와 친밀도]
table.insert({"id":123456, "flist":[(100001, 10), (100002, 20)]})
c=table.find({"id":"123456})
# 각 유저의 자기가 속한 방들의 목록
# 방의 id는 room token
table = db.weechat.myrooms
print table
table.insert(
{“uid”=12345,
“ismine”=1, # 1 or 0. yes/no
“roomid”=”ddcddsd”
)
# 각 방의 정보
table = db.weechat.roominfos
print table
{
"creator": uid, # twitter user id
"roomid": roomid,
"title": title,
"created_at": created_at,
"members": members, [ id1, id2, id3] # twitter user ids
}
--
db.weechat 대신에
db.weechat2 라고 만들어서..
특히 twitter id는 int
twitter screen_name 은 string
-----
javascript json rpc:: http://easyxdm.net/wp/
Weechat2
1) users
id : Int | screen_name : String | name : String |
100001 | Mungqoo | yyyy |
100002 | Lullujune | xxxx |
100003 | xxxx | zzzz |
100004 | merong | LeeBado |
2) followers
ID: Int | Flist:Dictionary list |
100003 | "flist":[(100001, ‘yyyy’, 10), (100002, ‘xxxx’ ,20),(100004,’LeeBado’, 30)] |
3) myrooms
4) roominfos
roomid: String | title: String | createtime: String | creator: Int | guests: Int list |
“akdptmxmfh” | project1 | 2011-08-02 14:30 | 100001 | [100002,100003 ] |
“dkskaxkdnj” | project2 | 2011-08-02 15:03 | 100004 | [] |
== 친밀도 계산
tweepy이용
나자신 me = api.me()
me.id
msgs = api.mentions()
dmesgs = api.direct_messages()
mention 중에 내가 보낸 것은 1점 // 구해지지 않음. 제외
mention 중에 내가 받은 것은 2점
DM 중에 내가 보낸 것은 2점 // 구해지지 않음. 제외
DM 중에 내가 받은 것은 4점
mention의 author.id == me.id 이면 내가 보낸 것
== 웹페이지 넘겨주기
[ (id, score, s_name, name, img_url)]
---\
import json
from pymongo import json_util
allusers=json.dumps(users, default=json_util.default)
usersjson=eval('('+allusers+')')
print usersjson
flist= json.dumps(my_flist,default=json_util.default)
flistjson = eval('('+flist+')')
print flist
self.render("user_socialgraph.html", userjson=usersjson, flistjson=flistjson)
==
채팅 서버 경로: /home/pjm0616/chat/a.py
테스트용 클라이언트: /home/pjm0616/chat/web/
REQ: chat.weechat.kr/create
JSON = { “roomid”: “fsdfdsfckckmd”, “token”: “fdsdlkkcds”}
chat.weechat.kr/adduser?roomid=xxxx&token=yyyy
JSON = {“token”:”fdfdsfdsf”}
REQ: chat.weechat.kr/chat?roomid
REQ: chat.weechat.kr/chat?roomid
{‘cmd’:’id’, ‘uid’:”uno4vuasorcuos”, ‘roomid’:’asp9umf9er’}
{‘cmd’:’msg’, ‘msg’: “메시지”, ‘from’:’’}
{cmd’:’join’, ‘who’:’awceacr’}
{‘cmd’:’leave’, ‘who’:’asiuc3ac’}
------- 8/23 최종 설계 (graph 화면, weechat 서버, chat 서버 연동 방법)
weechat.kr 의 user_graph 화면에서 친구들 중에서 대화할 사용자 클릭
weechat.kr/create?partner=상대방사용자id 로 새로운 채팅 창이 뜸
weechat.kr/create?partner=상대방사용자id&title=hihi
위 페이지에서 chat.weechat.kr:19999/p/create 에 접속하여 방을 만든 후
사용자를 weechat.kr/chat?room=방ID
로 이동시킴
-->
self.render("chat.html", roomid=roomid, twt_uid=twt_uid)
weechat.kr/chat?room=12321312 에서는 자바스크립트를 사용하여
chat.weechat.kr:19999/ws/chat 으로 웹소켓 연결 후 채팅
웹 소켓 연결시는 방id와 유저id(트위터상의 숫자로 된유저id가 필요)
웹 소켓 연결 후 새로운 사용자가 채팅에 참여하면
그 사용자의 유저id를 weechat.kr/getuserinfo?id=유저ID 와 같은 식으로 접속하여 AJAX로
해당 유저id에 대한 정보(닉네임 등)을 받아옴
---------