A chat system, you will find tons over the internet. It is one of the most ancient web applications which is known and chat systems have their roots merged with the birth of the internet itself!
Think about IRC for instance! Nevertheless, chats are extremely popular nowadays.
Think of Skype, WeChat, telegraph, etc.. they are used by dozens of millions of users every day and a lot of business and collaborative work is conducted there!
Chats can run as desktop applications or as mobile applications, both usages seem to be prevalent as well.
Now with the ‘modern’ web, chats can be very fluid, pleasant, and provided with a beautiful user interface – far from the old IRC systems. It is often a pleasure to write messages on modern chats because they are so elegant and fast.
Here, we do not pretend to provide such a chat system, we only aim at demonstrating some of the aspects of the technology involved (think about it as an IT school project).
The chat that we wish to develop will provide a way to find ‘matching profiles’ among the chat registered participants. These matching parties can, therefore, be contacted directly. What we will develop is an unfinished and untested application.
How will we provide the ‘matching system’ is one question and what framework will we use to provide the chat client and the chat server?
The matching system will consist of psychological quizzes. Therefore from the scoring, one can see what profiles are likely to be similar. We will provide questions that can lead to a unique personality trait definition.
As for the chat system, we will use an existing framework. There is a good open-source chat system written in C# using the Signal-R framework. We will use it as a basis and modify it for our purposes.
ASP.NET SignalR is a library for ASP.NET developers that allows them to create “real-time” web applications.
That ‘real-time” functionality is the ability to have the server pushing content to connected clients instantly as this data becomes available, rather than having the server wait for a client to request new data (polling).
Signal-R usually relies on WebSockets but has a fallback mechanism when such WebSockets are not available. This is the same approach as the Bayeux channels, Meteor, or grizzly.
Signal-R is not a real “real-time” unless it is running on an RTOS platform but it provides real speed for interactive web applications such as chats, using RPC.
Signal-R is ideal for chat systems, indeed it provides the following features:
Handles connection management automatically.
Sends messages to all connected clients simultaneously. For example, a chat room.
Sends messages to specific clients or groups of clients.
When modifying a model-view-controller application, one should certainly add more views, more models, and more controllers. Here we aren’t going to do like that, we will simply add forms that will run independently of the MVC code, eventually sharing the same database.
This is of course not the recommended way to modify an MVC application but there we wish simply to demonstrate some technological aspects.
We will not use the mobile application client. We will only develop a web system that will run in a modern browser.
When the user registers, the chat offers only 4 basic icons as possible avatars. This is really not enough, so we will have to add as many avatars as we can.
Additionally, there are but a few smileys, we wish to add more with various types.
The chat does not also provide a profile for a user, e.g. a place where the chat user can input their birthdate, location, age, etc… we will have to add this as well.
Finally, we must ‘plug-in’ our psychological tests in such a way that they are fully integrated with the chat. We can use bootstrap for this. Eg opening pop-up like windows smoothly in the browser.
As we said there are but a few Emojis (‘Emoticons’), we must download new ones: either we design it ourselves, or we fetch them from some website that collects emojis.
We need to add them to the emojis folder, in the content folder of the chat.
Make sure they get properly compiled and copied when a build is done. You can batch-do this.
We need to map our new emojis to a command such as 🙂 or :-> for this we go to BasicEmojis.cs and we add some new mapping:
public class SQLUtils
{
public static readonly char s = '\'';
public static readonly char sep = ',';
public static bool ExistsInDb(String id, int n_test)
{
try
{
String check_queryString = @"SET NOCOUNT OFF;SELECT avatar FROM quizz1 WHERE EXISTS (SELECT avatar FROM quizz_" + n_test + " WHERE avatar = '" + id + "');";
String select_queryString = @"SET NOCOUNT OFF;SELECT avatar FROM quizz_" + n_test + " WHERE avatar = '" + id + "';";
using (SqlConnection connection = new SqlConnection(System.Configuration.ConfigurationManager.
ConnectionStrings["DefaultConnection"].ConnectionString))
{
SqlCommand command = new SqlCommand(select_queryString, connection);
connection.Open();
String r = (String)command.ExecuteScalar();
if (r != id)
return false;
else
return true;
}
}
catch (Exception ex)
{
}
return false;
}
public static string getAvatarFromUsername(string id_)
{
Dictionary<String, Object[]> d = dumpUsers();
foreach (KeyValuePair<String, Object[]> K in d)
{
if ((String)K.Value[13] == id_)
return K.Key;
}
return null;
}
internal static bool setProfile(Chatprofile cp)
{
try
{
String queryString = @"DELETE FROM [USERS2] WHERE AVATAR = '"+cp.avatar+@"';
INSERT INTO [USERS2] ([avatar], [sex], [town], [country], [email], [aboutme], [age]) VALUES ('"+cp.avatar+ "', '" + cp.sex + "', '" + cp.town + "', '" + cp.country + "', '" + cp.email + "', '" + cp.aboutme + "', '" + cp.age + "')";
using (SqlConnection connection = new SqlConnection(System.Configuration.ConfigurationManager.
ConnectionStrings["DefaultConnection"].ConnectionString))
{
SqlCommand command = new SqlCommand(queryString, connection);
connection.Open();
command.ExecuteNonQuery();
}
}
catch (Exception ex)
{
}
return false;
}
public static Chatprofile getProfileFromUsername(string id_)
{
Dictionary<String, Object[]> d = dumpUsers();
String ID = getAvatarFromUsername(id_);
if (ID == null)
return null;
if (!d.ContainsKey(ID))
return null;
Chatprofile cp = new Chatprofile();
cp.avatar = ID;
// cp.email = (String)d[ID][3];
cp.icon = (String)d[ID][2];
// cp.phone= (String)d[ID][7];
Dictionary<String, String[]> d2 = dumpUsers2();
// String ID2 = getAvatarFromUsername(id_);
//if (ID2 == null)
// return cp;
if (!d2.ContainsKey(ID))
return cp;
cp.sex = d2[ID][1];
cp.town=d2[ID][2];
cp.country = d2[ID][3];
cp.email = d2[ID][4];
cp.aboutme = d2[ID][5];
cp.age = d2[ID][6];
return cp;
}
We do the same thing in general with everything that we need from the database. We will generally use these routines to query data in the DB via a form.
We can change many things in the base chat, the CSS, etc… What is important is to allow a chat user to view a profile by clicking another chat user.
We code the following small function in javascript:
This is a really important part of the project. We want to build psychological quizzes.
The idea is to have the chat user answering several questions and then the results are stored in the database.
Later on, some matching coefficients can be computed by anyone on the chat so to find the best ‘matching souls’ based on how many identical answers there are.
Designing the Quizzes
Designing Quizzes isn’t always easy. Here we try to avoid the cliches with the ‘sentimental’ matching. After all, we do not want specifically to develop a matching website!
We will try to develop original psychological quizzes that can reveal specific traits of the personality of the chat users!
As a start, we will use bootstrap for displaying online and smooth inline windows.
At the start, we simply present a set of images and we ask the user to click which one he/she likes or hates the most.
We code this as a big HTML sequence of tables that will be successively hidden/revealed with the progress of the quizz.
We need to take care that the user can close the windows and automatically comes back where he/she left the quizz.
function quizz2(a) {
if (quiz2 > 1)
return;
var s = a.src;
if (s == null) {
a.style.border = "5px solid #ff0000";
quiz2++;
return;
}
var tbl = s.split('/');
var n = tbl.length;
var nm = tbl[n - 1];
var answer = nm.replace('.jpg', '');
quiz2++;
test_results2[i_test2 - 1] = answer;
}
In fact, we upload via ajax each test as soon as it is done so if there are like 10 groups of images we will progressively store the partial results of the tests 10 times.
There are about 30 such tests… only when you choose one you can move to the next.
Next, we create a more complicated psychological quiz. This will be using forms and ASP.NET ajax, with a timer and an ASP.NET update panel.
Each time the server computes the partial results for matching.
As you can see from the design view we have a script manager.
This is because we use the ASP.NET ajax features which allow you to code as always using codehind but without a complete page reload.
Once the quizzes have been performed, users need to be able to search for a matching soul. We will, therefore, compare the identical amount of answers with other users.
There is nothing very complicated there but it needs to get done!
We again will code that into a form that will return the matching results.
public static Dictionary<int, string[]> getMatches2(ref int p_progress, string id, int n_test, int n_tests, string id_target = null)
{
Dictionary<int, string[]> dic_ret = new Dictionary<int, string[]>();
Dictionary<String, String[]> target = SQLUtils.dumpQuizz(n_test, n_tests);
Dictionary<String, String[]> dic_ = target;
if (id_target != null)
{
if (!dic_.ContainsKey(id_target))
{
return dic_ret;
}
// KeyValuePair<String, String[]> X = new KeyValuePair<String, String[]>(id_target, dic_[id_target]);
dic_ = new Dictionary<String, String[]>();
dic_.Add(id_target, dic_[id_target]);
}
//ref record
if (!dic_.ContainsKey(id))
return null;
String[] rec = dic_[id];
//remove caller
dic_.Remove(id);
foreach (System.Collections.Generic.KeyValuePair<String, String[]> K in dic_)
{
int c = 0;
for (int i = 0; i < n_tests; i++)
{
if (K.Value[i + 1] == rec[i + 1])
c++;
}
int percent = (int)((100 * c) / n_tests);
if (!dic_ret.ContainsKey(percent))
dic_ret.Add(percent, new String[] { K.Key });
else
{
List<String> l0 = dic_ret[percent].ToList();
l0.Add(K.Key);
dic_ret[percent] = l0.ToArray();
l0.Clear();
}
}
//sort by declearsing values
return dic_ret;
}
private string printMatches(Dictionary<int, string[]> dic)
{
Dictionary<String, Object[]> dic_users= SQLUtils.dumpUsers();
var myList = dic.ToList();
String res = "";
myList.Sort((pair1, pair2) => pair1.Key.CompareTo(pair2.Key));
myList.Reverse();
foreach (System.Collections.Generic.KeyValuePair<int, String[]> K in myList)
{
if ((K.Value != null) && (K.Value.Length > 0))
{
// String[] Value2 = K.Value.Reverse().ToArray();
res = res + "<b>" + K.Key + "% matching </b>(" + K.Value.Length + ")";
for (int i = 0; i < Math.Min(K.Value.Length, 5); i++)
{
String avatar = K.Value[i];
String img = dic_users.ContainsKey(avatar) ? (String)dic_users[avatar][2] : null;
res = res + "<div>" + avatar;
if (img!=null)
res=res+ "<img src=\""+img+"\" width=\"64px\" height=\"64px\">";
else
res = res + "<img src=\"Content/icons/anyone.png\" width=\"64px\" height=\"64px\">";
Chatprofile cp = SQLUtils.getProfileFromUsername(avatar);
if (cp != null)
{
if (cp.sex == null)
cp.sex = "unknown";
res = res + cp.sex + "," + cp.age + " yrs," + cp.town + "," + cp.country;
res = res + "<a href=\"javascript:displayprofile3('" + avatar + "');\">...</a>";
}
res = res + "</div>";
}
if (K.Value.Length > 20)
res = res + "<div>...</div>";
}
}
return res;
}
Finally, the chat can be used to find matching souls and chat with them.
We saw how to use an existing chat based on Signal-R and how to tune it to transform it into a system where users can find ‘matching souls’ using quizzes.
We saw how ASP.NET and AJAX ASP.NET allow us to create rich web applications that run smoothly into the browser.
We hope you enjoyed the tutorial and that you have found some useful information.
Acodez is a leading website design and web development company in India. We offer all kinds of web design and web development services to our clients using the latest technologies. We are also a leading digital marketing agency providing SEO, SMM, SEM, Inbound marketing services, etc at affordable prices. For further information, please contact us.
Looking for a good team
for your next project?
Contact us and we'll give you a preliminary free consultation on the web & mobile strategy that'd suit your needs best.
Jamsheer K, is the Tech Lead at Acodez. With his rich and hands-on experience in various technologies, his writing normally comes from his research and experience in mobile & web application development niche.
This was a very meaningful post, so informative and encouraging information, Thank you for this post.