IT정보뉴스

데이터는 어떻게 정리되고 검색될까?

안녕하세요. LG CNS 대학생 기자단 6기 조서원입니다.이제는 뗄래야 뗄 수 없는 스마트폰! 스마트폰의 수많은 기능 중 여러분이 가장 자주 사용하는 기능은 무엇인가요? 저는 포털 사이트 검색어 순위를 확인하거나, 궁금한 정보를 찾아보고, 자료를 저장하는 등 인터넷을 많이 활용하고 있는데요. 그러던 어느 날 문득 내가 만들고, 찾아서 이용하는 수많은 데이터들이 어디에 저장되고, 어떻게 보이는가에 대한 원리가 궁금해졌습니다.  수많은 사람들이 생산해 내는 데이터들이 보이지 않는 어딘가에 저장되고 있을 텐데요. 이런 어마어마한 규모의 빅데이터가 어디에서 관리되고, 어떻게 검색 결과로 보이게 되는 것일까요?  그럼 지금부터 ‘빅데이터가 어떻게 처리되어서 검색 결과로 보이는가’에 대한 궁금증을 같이 해결해 보도록 하겠습니다.  빅데이터 분산 처리 기술, ‘Hadoop’먼저, 빅데이터를 처리, 분석할 때 가장 많이 사용되는 하둡(Hadoop)에 대해 알아볼까요? ① 하둡의 개념 하둡이란, 아파치 루씬 창시자인 미국 프로그래머 더그 커팅(Doug Cuting)이 2004년에 방대한 데이터 처리를 위해 구글의 맵리듀스(MapReduce) 등을 활용해 개발한 시스템으로, 저가의 서버와 하드디스크를 이용해 빅데이터를 상대적으로 쉽게 저장할 수 있는 분산형 파일 시스템입니다. 하둡 등장 이전 대용량 데이터는 슈퍼컴퓨터 등 고가의 장치를 이용해 처리되었습니다. 저장 공간이나 컴퓨팅 자원 부족, 높은 비용 소모에 대한 부담과 관련 기술, 엔지니어의 부족 등의 문제 때문에 기업들은 중요하다고 판단되는 데이터만 분석했는데요. 이로 인해 기존 데이터를 비용 대비 효율적으로 처리할 수 있는 방법론이 꾸준히 요구되었습니다.이 때 등장한 시스템이 ‘하둡’입니다. 하둡은 여러 개의 일반 컴퓨터를 하나의 컴퓨터인 것처럼 묶어 대용량 데이터를 처리하는 기술입니다. l Hadoop 로고 (출처: Hadoop 홈페이지)하둡은 수천 대의 분산된 장비들에 대용량 파일을 저장할 수 있는 기능을 제공하는 분산 파일 시스템(HDFS)과 저장된 파일 데이터를 분산된 서버의 CPU와 메모리 자원을 이용해 쉽고 빠르게 분석할 수 있는 컴퓨팅 플랫폼인 맵리듀스(MapReduce)1로 구성됩니다. 즉, HDFS에 데이터를 저장하고 맵리듀스를 이용해 데이터를 처리합니다. 이전까지 대용량 데이터를 저장하고 처리하기 위해 슈퍼컴퓨터를 썼다면, 하둡의 등장으로 일반 PC 10대를 하나의 슈퍼컴퓨터처럼 대규모 기억장치로 묶어 사용할 수 있어 비용 면에서 큰 절감 효과를 가져오게 되었습니다. 커팅은 이렇게 개발한 기술을 다른 개발자도 자유롭게 가져다 쓰고 발전시킬 수 있도록 소스 코드를 공개하고 있습니다. ② 하둡의 특징 뉴욕 증권거래소에서는 하루에만 1TB에 이르는 거래 데이터가 발생하고, 페이스북에는 30PB가 넘는 사진 DB가 쌓여 있습니다. 기업들은 이러한 빅데이터를 저장하기 위해서 비싼 외부 저장 장치 등을 사용하는 것보다 오픈 소스인 하둡을 사용하는 것이 비용 절감 등에서 유리하고, 설치 및 사용도 쉬워 많이 이용하고 있습니다. 또한, 전문가들은 하둡을 이용하면 빅데이터를 보다 원활하고 효율적으로 분석할 수 있다고 평가합니다. 하둡 프레임워크는 대용량 데이터를 값싸고 빠르게 분석할 수 있게 돕습니다.   기업은 하둡을 활용해 빅데이터 분석에 들어가는 초기 비용을 줄이면서 자사 데이터 시스템과의 호환 문제도 손쉽게 해결할 수 있습니다. 또한 기존에는 슈퍼컴퓨터를 며칠씩 돌려야 했던 데이터도 하둡을 이용하면 x86 서버로 실시간 분석이 가능합니다.한 예로, 페이스북은 데이터 중 일부인 30PB(미국 국회도서관에 저장된 정보량의 약 3배) 정도를 하둡에 저장한다고 합니다. 대용량 사진 데이터를 작은 데이터로 쪼개 약 2천여 개의 서버가 매 순간 데이터를 처리하기 때문에 사용자는 페이스북에 사진을 쉽게 올리고 받으며, 다른 사람의 페이스북 사진을 클릭과 동시에 볼 수 있습니다.뿐만 아니라, 사용하기 쉽고 편리하다는 장점은 하둡이 급속도로 퍼지는 데 기여했습니다. 조금만 익히면 사용할 수 있어 기업들은 하둡으로 PC를 병렬로 연결해 빅데이터를 분산 처리하는데 이용하기 시작했고, 편리한 사용자 분석과 사용자 지향의 새로운 서비스를 개발할 수 있게 지원하는 하둡의 기능에 주목했습니다.마지막으로, 하둡의 특징 중 하나는 메모리나 디스크를 공유하지 않는 다수의 머신에서 실행할 수 있다는 것입니다. 작은 조각으로 데이터를 나누어 그 조각을 배포하고 처리하며 원하는 대상 플랫폼에서 자동으로 결과를 병합 가능하기 때문에, 더욱 편리하게 어디서든 빅데이터 처리가 가능합니다.  고성능 오픈 소스(IR, Information Retrieval) 정보 검색 라이브러리 ‘Lucene'이번에는 하둡을 기반으로 제작되는 정보 검색 라이브러리 루씬(Lucene)에 대해 알아보겠습니다.l Lucene 로고 (출처: Lucene 홈페이지)① 루씬의 개념 하둡 개발자인 더그 커팅(Doug Cuting)에 의해 1999년 개발된 루씬은 자바로 개발된 확장 가능한 고성능 오픈 소스 정보 검색(IR, Information Retrieval) 라이브러리입니다. 대표적으로 색인 기능, 검색 기능, 다양한 나라의 Full Text 분석기 등의 기능을 지원합니다. 이것은 독립된 프로그램이 아니라 단순한 소프트웨어 라이브러리이기 때문에 개발자가 루씬 라이브러리를 이용해 검색 서비스, 애플리케이션 구현 후 사용할 수 있습니다. ② 루씬의 특징 원래 자바로 만들어진 루씬은 펄(Perl)에서 시작해 파이썬(Python), C++와 닷넷(.NET) 등의 언어로 포팅되어 있습니다. 이렇듯 루씬은 서로 다른 언어 간에도 색인 데이터를 100% 호환해서 사용할 수 있도록 설계되어 있습니다.또한 소프트웨어 프로그램에 색인과 검색 기능을 전문 지식이 없이도 간단하게 추가 가능해 IT 업계에서 많이 이용합니다. 추가적으로, 다양한 나라의 Full Text 분석기(Analyzer) 검색 엔진 기능이 특징적입니다. 개발자들은 색인 기능을 사용할 때, 단순한 문자열을 색인하기보다는 다양한 문서를 색인화하고 검색하는 작업을 합니다. 이때, 루씬을 이용해서는 임의의 바이너리 파일(Binary file)2을 직접 색인하고 검색할 수 없으며, 모두 문자열 형태로 변경된 후에 루씬으로 색인하고 검색할 수 있습니다. 따라서 XML, PDF, HTML, MS WORD 같은 다양한 문서들을 색인화하기 위해서는 각각의 문서를 루씬의 분석기가 이해할 수 있도록 해석(parse)해서 텍스트로 추출해 내는 과정이 필요합니다.이는 Full-Text(Contents)와 text를 단어로 쪼개는 방법(Analyzer)을 제시하면 알아서 인덱스를 구성해 주고 그것으로 빠른 검색 결과를 얻을 수 있기 때문인데요. 내용 검색을 위해 루씬을 사용하는 것이 효율적입니다. ③ 루씬 개발 사례 루씽을 인덱싱과 검색에 적용한 사례들은 아래와 같습니다.   오픈 소스 검색 엔진 ‘Nutch’그렇다면, 루씬을 기반으로 개발된 오픈 소스 검색 엔진 너치(Nutch)에 대해 알아볼까요?l Nutch 로고 (출처: Nutch 홈페이지) ① 너치의 개념 광고가 많은 인터넷 검색 사이트에서 상업적인 요소를 배제한 검색을 구성하고자 진행된 오픈 소스 인터넷 웹 검색 엔진 프로젝트인 너치는 루씬을 기반으로 하여 자바로 구현되었습니다. 이는 오픈 소스 검색 엔진이라는 점에서 기존 기업들의 접근 방식과 차이가 있습니다. 따라서 넛치 검색 엔진의 소스는 완전히 공개되고, 누구나 무료로 이를 자신의 응용 프로그램에 맞게 변형하거나 재사용하는 것이 자유롭습니다. ② 너치의 특징 루씬은 인덱서와 정보 검색사(Searcher)로 구성되어 있고, 루씬 기반의 공개 웹 검색 엔진인 너치는 루씬에 없는 웹 검색에 필요한 모든 기본 요소를 전부 갖춰 웹 검색 용으로 확장한 것인데요. 너치는 루씬을 이용하기 때문에 수억 개 이상의 웹 페이지를 모아 색인, 검색이 가능하며 모듈화가 잘 되어있어 여러 가지 플러그인을 붙일 수 있습니다. 또한 자바로 작성되어 있지만 자료는 특정 언어에 관계없는 형태로 저장할 수 있습니다.또한 하둡으로 구현하면 효율이 좋기 때문에 저장소 안에 자료가 많아 여러 대의 서버에서 동시에 구현, 가동할 수 있습니다. ③ 너치의 구조 너치의 전체적인 구조는 일반적인 웹 검색 시스템 구조와 유사합니다.너치를 이용한 검색 절차는 다음 순서와 같습니다. 웹 서버가 사용자의 검색 요청을 받음질의 핸들러(Request handler)가 검색어 가공 후 다수의 색인 검색 서버로 전달질의 핸들러가 넘긴 검색어에 대해 나온 여러 색인 서버에서 결과를 점수가 높은 순서로 정렬1~2초 후 결과를 주지 않는 색인 서버가 있으면 결과에 포함하지 않고 무시 (2초 안에 결과가 나오도록 보장) 기업 대상 검색 서버 ‘Solr’마지막으로, 너치(Nutch)가 확장된 기업 대상 검색 서버 솔라(Solr)를 소개하겠습니다.l Solr 로고 (출처: Solr 홈페이지) ① 솔라의 개념 솔라는 오픈 소스 검색 엔진인 루씬 프로젝트에 기반을 둔 엔터프라이즈 검색 서버로, 기업을 대상으로 더 다양하고 전문적인 기능을 추가하여 개발되었습니다. 이는 루씬을 기반으로 전체 텍스트 검색, 다면적인 검색, 실시간 인덱싱, 클러스터링, 데이터베이스 통합, 다양한 문서 처리 및 검색, 솔라 분산 인덱싱 등의 기능을 지원합니다.솔라는 모든 기능을 HTTP 프로토콜을 통해 제공하는데요. 여기에는 색인, 검색, 삭제, 업데이트뿐만 아니라 스키마 추가, 업데이트, 리플리케이션 등 모든 기능을 포함합니다. 또한 솔라는 POST와 GET을 이용해 색인을 관리하고 검색을 요청할 수 있습니다. HTTP 만으로 모든 작업을 할 수 있기 때문에, CURL 등의 도구를 이용해서 간단하게 검색 애플리케이션을 개발할 수 있다는 장점이 있습니다.  ② 솔라의 특징 솔라는 단독 애플리케이션 서버 형태로 작동하며, REST 형식의 API를 제공합니다. 문서들은 HTTP를 이용해 XML•Json•CSV•바이너리 등의 형태로 색인, 검색을 요청하고 결과를 받아올 수 있습니다.  ‘내가 필요한 자료들은 USB나 하드디스크에 저장하는데, 온라인에 올리는 사진이나 문서 파일들은 어디에 저장되는 걸까? 그리고 그 자료가 어떻게 검색 엔진에서 보이는 걸까?’라는 작은 질문에서 시작하여 이에 대한 원리와 기술에 대해 조사하게 되었습니다. 그동안 간편하게 사용해왔던 기능들이 수많은 개발자들에 의해 끊임없이 논의되고, 업데이트 되고 있기에 사용 가능했던 것을 알게 되었는데요. 점점 데이터가 증가하고, 세분화되면서 추가되고 있는 새로운 기능들도 많았습니다.이번 조사를 계기로 앞으로는 유용하게 사용하고 있는 기능들의 원리에 대해 한 번 더 생각하고 이용할 수 있을 것 같습니다. 그리고 주어진 기능을 수동적으로만 사용하기보다는, 개선점을 찾을 수 있도록 능동적으로 기술을 대하려는 태도와 생각의 변화가 생기게 되었습니다.여러분도 평소에 이용하던 기능이나 기술의 원리가 궁금한 적이 있다면, 지금 한 번 검색해 보세요. 원리를 알면 더 유용하게 사용하실 수 있을 것입니다!출처: http://blog.lgcns.com/1176 [Creative and Smart! LG CNS]

최근 등록된 자바스크립트 소스

사진 설명
사진

Javascript 암호화 하기

Javascript 로 암호화 할 일이 생겨서 Search 중 발견 했다.※ github - https://github.com/tomyun/crypto-js보통 서버에서 암호화 작업을 하거나, SSL 을 사용 하는대 어쩔 수 없이 암호화 를 하는 점도 있는거 같다.단방향 암호화 알고리즘 사용에는 편리 한것 같다. 적용 방법소스 다운 후 아래와 같이 적용 한다. 다른 알고리즘을 사용할 경우 다른 js를 사용 한다.<script type="text/javascript" src="/core.js"></script> <script type="text/javascript" src="/sha256.js"></script> CryptoJS.SHA256('test').toString() 출처: http://blog.whitelife.co.kr/177 [White Life Story]CryptoJSThis repository is a mirror of crypto-js from Google Code. Its full history has been converted with svn2git, yet it is not guaranteed to track more recent changes. Other than that, several branches have been created for working on some extra stuffs.SEEDSEED-128 is a block cipher which shows extensive and exclusive use in South Korea. It features a so-called Feistel network seemingly not very different from other predecessors like DES. If necessary, various options including IV, block modes, and/or padding, can be specified as original CryptoJS syntax.<script src="https://rawgithub.com/tomyun/crypto-js/seed-3.1.2/build/rollups/seed.js"></script> <script> var encrypted = CryptoJS.SEED.encrypt("Message", "Secret Passphrase"); var decrypted = CryptoJS.SEED.decrypt(encrypted, "Secret Passphrase"); </script>CP949CP949 is a character encoding for Korean language. In the current UTF-8 era, it still has widespread adoption among many domestic corporate sites. In short, there are plenty of seed-encrypted packets whose source is in CP949. Be cautious of its insane filesize: ~170 kB<script src="https://rawgithub.com/tomyun/crypto-js/seed-3.1.2/src/enc-cp949.js"></script> <script> var words = CryptoJS.enc.CP949.parse('?沮d'); var cp949 = CtyptoJS.enc.CP949.stringify(words); </script>PBKDF1PBKDF1 is a key derivation function superseded by more robust PBKDF2. While any supported hash functions can be used, keys longer than the hash digest cannot be derived.<script src="https://rawgithub.com/tomyun/crypto-js/xeit-3.1.2/build/rollups/pbkdf1.js"></script> <script> var salt = CryptoJS.lib.WordArray.random(128/8); var sha1 = CryptoJS.algo.SHA1; var key = CryptoJS.PBKDF1("Secret Passphrase", salt, { keySize: 128/32, hasher: sha1, iterations: 1000 }); </script>RC2RC2 is a block cipher whose details were kept secret for a decade. Although it has been superseded by many other recent algorithms, there are some legacy systems still dependent on. The effective key length is 32 bits by default, while it can be specified up to 1024 bits.<script src="https://rawgithub.com/tomyun/crypto-js/xeit-3.1.2/build/rollups/rc2.js"></script> <script> var encrypted = CryptoJS.RC2.encrypt("Message", "Secret Passphrase", { effectiveKeyBits: 64 }); var decrypted = CryptoJS.RC2.decrypt(encrypted, "Secret Passphrase", { effectiveKeyBits: 64 }); </script>

사진

w2ui New JavaScript UI Library

w2uiNew JavaScript UI LibraryWhat People Are SayingI have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri PanagouI've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code. - CollandersI must say, I really like all of these controls. They have clean, elegant visuals and the attention to design detail really makes me a fan. In particular, the grid is just incredible. - Bob FI was searching for a slick and simple, but also user-friendly UI library. I tried Polymer, Angular, OpenUI5, jqwidget, … but they do not satisfy my needs. I don’t want to declare the whole UI in html (templates) but instead will create ALL UI elements programmatically (in an easy way). With w2ui this can be done really easy and the UI elements looks really nice. - Gerald LeebW2UI is an excellent library! In less than a couple of days I was able to reach the same degree of functionality in my project (an interface for my lab database), which took me a couple of months using a well known widget library. W2UI is clean, small, fast and efficient. Plus, it's good looking! - Antonio SantosVery nice looking library. I'm impressed and very hopeful that this will continue to grow and become a major player. The Grid is awesome! - John WhittenI'm loving w2ui, it packs a lot of punch for such a light library. After working with ExtJS for 5 years, I've finally found a suitable replacement. The grid is fantastic! Thanks for all your hard work. - Neil GroverI am seriously blown away at the amazing quality of this library. Well done! - BillyThis is amazing! If any project I use this is profitable I'll make sure to pay you for it. - Bruno CassolThis is incredible, thank you. - Anthony IsaacsonThis library is absolutely amazing, i never seen in my life such a clean and understandable code!!! Congrats for your work! - MrCattFirst of all, thank you very much for your hard work on these components - they're all very, very good! - Dave ThompsonW2UI 1.5 - MIT LicenseW2UI is modern, intuitive JavaScript UI library for building rich data-driven web application. The library has a small footprint and only jQuery (1.9+) as a dependency. The library has the following widgets:w2layoutw2gridw2toolbarw2sidebarw2tabsw2formw2fieldsw2popupw2utilsThe complete library is only 69Kb (minified & gzipped)Who Uses ItIf you're using w2ui I'd love to hear about it, please email to vitmalina@gmail.com name of your project and a link to a public website or demo and I will add it to the list.List of projects that use w2uiQuick StartCurrent stable version is 1.4. Current development version is 1.5.rc1.You can:Download from here: http://w2ui.comInstall using bowerbower install w2ui To start using the library you need to include into your page:w2ui-1.4.js (or w2ui-1.4.min.js)w2ui-1.4.css (or w2ui-1.4.min.css)All the widgets and their css classes are defined inside of these two files. There is no image dependencies, some images are embedded into CSS file.There is no requirement for a server side language. Node, Java, PHP, ASP, Perl or .NET all will work, as long as you can return JSON format from the server (or write a converter into JSON format on the client).Getting Started GuideDocumentation & DemosYou can find documentation and demos here:http://w2ui.com/web/docs - documentationhttp://w2ui.com/web/demos - demosBug TrackingHave a bug or a feature request? Please open an issue here https://github.com/vitmalina/w2ui/issues. Please make sure that the same issue was not previously submitted by someone else.BuildingI have switched to Grunt as a build tool. You will find Gruntfile.js in the root. You still can build with ANT if you are more comfortable with it. Both processes will produces same w2ui.js and w2ui.css files. Grunt has a few more tasks, such as watch, to auto compiles less and js files as you develop. Both tools will do the following:Compile LESS filesConcatenate and minify CSS filesConcatenate, uglify and minify JS filesTo use ANT, you will need to install NodeJS and NPM, then run the following command to install dependenciessudo npm install less -g sudo npm install clean-css -g sudo npm install uglify-js@1 -g To use Grunt, you will still need to install NodeJS and NPM, then run npm install that will install all dependencies as they are described in package.json file.npm install File Structure- dist - compiled JS and CSS files - src - source JS files - kickstart - copy of another project used with the demos (not part of w2ui itself) - less - LESS files (source for css) - demos - all demos, same as on the website - libs - auxiliary libraries (jquery, codemirror, etc.) used in the demos (not part of w2ui itself) - server - example implementations for a server implementation communicating with w2ui instances - test - feature testing files - qa - some qunit test ContributingYour contributions are welcome. However, few things you need to know before contribution:Please check out latest code before changing anything. It is harder to merge if your changes will not merge clean.If you are changing JS files - do all changes in /src folderIf you are changing CSS files - do all changes in LESS in /src/less/srcIf you want to help with unit test - do all changes in /qaIf you want to change documentation - do all changes in /docsIf you want to add demos - do all changes in /demoshttp://w2ui.com/web/docs/1.5/

사진

웹에서 채팅하기 converse.js

웹에서 채팅하기 converse.js4월 21, 2017, 3:27 오후웹 페이지에서 채팅을 할 생각을 해보았다.그래서 ‘open source web chat’ 검색하였다.converse.js가 보인다.demo 사이트에 접속하여 동작하는지 확인한다.동작하는 군.내 환경에 getting started 준비한다. index.html 파일을 생성.음, 만들긴 했는데, .. 서버는 어떡하지?BOSH 음. 전동공구가 필요하구나. … 뭔가 서버에 또 깔아야 하나? …그렇군. 내가 사용중인 서버 ejabberd가 BOSH가 되는 군.TADA …된다 !!!ps. 이제 이 블로그에 붙여봐야지.The Converse.js User ManualTable of ContentsRegistering a new chat accountChoosing your providerFilling out the registration formAdding a contactA pending contactA normal contactRemoving a contactThe converse.js websiteWelcome to the converse.js user manual. This manual is very much still a work in progress and is far from complete. Please bear in mind that it’s the work of volunteers.If you have requests or suggestions on how the manual can be improved or expanded, then please contact me or create a new ticket on Github.Although converse.js can be integrated into any website, for this user manual we’ll refer to the canonical version at https://conversejs.org.This documentation also integrates the converse.js chat client, so you can try out some of the steps right on this page! Just click the Toggle chat button at the bottom right of the page to open the so-called control box of the converse.js chat client.Registering a new chat accountThe registration panel of converse.jsWith converse.js you can register a new XMPP account on any publically available XMPP provider. To do so, click the Register tab on the chat client.You will then see the registration panel as shown in the picture below.Choosing your providerConverse.js uses a chat protocol called XMPP (also known as Jabber) which allows “federation”. This means that it’s similar to email, in the sense that people signed in at different XMPP chat providers can still chat with one another.For example, if you have a Yahoo! email account, you can send and receive emails from a friend with a Google email account. In the same way, if you have a chat account from Conversejs.org, you can send and receive chat messages with a friend who has an account at Jappix.com.There are many free providers online which allow you to register a new account. You can see a list of some of them at xmpp.net. The xmpp.net website provides a security grading for the XMPP servers of the providers, which is very useful. They are however sometimes slow to add new servers to the list. A larger list of XMPP providers is also available at list.jabber.net.You can find the domain name for a server under the Domain column at xmpp.net. or the Server column at list.jabber.net.Once you know which XMPP provider you’d like to use, you can type its domain name and click the Fetch registration form button.The registration formFilling out the registration formAfter you’ve clicked Fetch registration form, the chat client will contact the chat provider, ask for its registration form and then present it to you.Different chat providers have different registration forms, but they’re all relatively similar.Check the security scoreAt the top of the form you’ll see a colored bar containing the text xmpp.net score. This shows the security score for this server as determined by xmpp.net where you can test out a server for yourself. You should generally avoid providers with a poor security score (colored in red).Choosing a usernameAs you can see in the registration form, the username consists of two parts separated with an @ sign, similar to an email address.The first part is your unique handle which you need to choose. The second part is the domain name of the chat provider, the one which you chose in the previous step when you fetched the registration form.When you want to give someone your XMPP chat username, or when you want to add someone else as a contact, you need to specify it in full, like you would an email address.Once you’ve chosen your user name and password, click Register. If Successful, you’ll be automatically logged in to your new account.The form for adding a new contactAdding a contactIn order to start chatting with someone, you first need to add them as a contact.To do this, click the Add a contact link in the Contacts tab. This will slide open a dropdown in which you can type the username of the person you’d like to add.Remember, an XMPP username (also called a JID or Jabber ID) is similar to an email address, in that you have both the user’s handle and the domain name of the provider, separated with an @ sign.Once you’ve typed the username and clicked submit, your request will be sent to this person. If they are online, they will immediately be notified of your request, otherwise they’ll see it next time they come online.Technically, when you add someone as a contact, you’re doing two things. Firstly, you are adding the contact to your roster (think of it as an address book) and secondly you are asking to be notified whenever that person comes online.A pending contactA pending contactThe person you are adding as a contact has the option to either accept or decline your request. Until that decision has been made, they will appear in your roster as a so-called pending contact. In other words, their final status is pending on whether they accept or decline your request.A normal contactA normal contactIf the person accepts your contact request, they will get a chat status indicator in your roster and will also become clickable. Clicking on the name of the user will open a chat box in which you can then start chatting with that user.Removing a contactRemoving a contactTo remove a contact, hover your mouse over their name and then click on the trash icon. You will be prompted to confirm, and if you do, the contact will no longer be visible in your roster.