I need a chatroom for my game
Example:
Like for the bottom left corner, please!
1 Like
Hello @LVMT i have looked through some things (Other than the engine source code) and this is what i found:
Make an html and css to size and create then add the chat room to the canvas with UI. To be noticed for the chatroom to work it may need to be connected to a network: Other words a multiplayer game, for it to work properly.
EDIT: Also to be noticed i dont think PHP is a possibility to use in playcanvas, you made need to convert to PY or inject a new html file and add the php as a script in the html doc.
@Nathan_Hawkins1 Can you send me a copy and paste or something?
im to lazy to copy this stuff
1 Like
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
</body>
</html>
Css Doc:
/* CSS Document */
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input { font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover { text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }
#loginform { padding-top:18px; }
#loginform p { margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px 12.5px 25px; }
.welcome { float:left; }
.logout { float:right; }
.msgln { margin:0 0 2px 0; }
PHP LOGIN:
<?
session_start();
function loginForm(){
echo'
<div id="loginform">
<form action="index.php" method="post">
<p>Please enter your name to continue:</p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
';
}
if(isset($_POST['enter'])){
if($_POST['name'] != ""){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo '<span class="error">Please type in a name</span>';
}
}
?>
SHOWING THE LOGIN FORM:
<?php
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>
jQuery:
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
Posting:
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>
LOGGING:
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents;
}
?></div>
Also this may not work completely as just a copy and paste, what you should do is find an example chatroom and study how it works, Also laziness will hurt you in the long run by wanting things done the easy way, this kind of stuff is very hard, you may want to be more intrigued in doing things yourself if you are interested in this type of thing.
If anything else or you get confused checkout this project here (https://playcanvas.com/editor/scene/368356) to see how to enable the text box and move from there.
2 Likes
ok thanks, ill reply back if i need any help <3
One suggestion, you can use this tutorial https://developer.playcanvas.com/en/tutorials/real-time-multiplayer/ to make a real time chat.
The tutorial shows how to transfer positioning between users, but it is simply to implement a chat with the same idea.
Basically you will need:
-
Connection screen
- 1 input - For the person to write the name
- 1 button for the person to connect
-
Chat screen
- 1 textarea - To show the messages
- 1 input - To be able to write the text
- 1 button - To send
You can use this template
I don’t know where to put the php
Hi @heylinc1,
PHP is a server side language, you can’t add it in your Playcanvas project. You will have to own a server/hosting package that allows you to upload and execute PHP scripts.
1 Like
can you send me the full html file?
You can use socket.io
Her is a a tutorial: https://socket.io/get-started/chat/
Use glitch.com for the server. Here is some info on that:
https://developer.playcanvas.com/en/tutorials/real-time-multiplayer/
socket.io is easier than PHP
Once you get the hang of it, its easy 
1 Like
thaks so much
one question do I have to ask itchio if I can put this on my website or do they just let people do it?
1 Like
I don’t know, let me look into that and get back to you 
1 Like
OK, I will see about that too
Hello, I am in need of an php/ html code for a web chat. I can not link anything the code needs to be writen. I can only find pages that link jquerry etc. That’s not what I need. I have one more week for this assignment and would really apricate if any one could help me out. I need to safe everything that is written in the chat room in a csv file.
Hi @Bernardo and welcome,
Since this forum is targeting PlayCanvas, for your question I think you will get more answers by searching and posting in places like Stackoverflow.
Anything
I made a small example of using tlk.io to create a HTML chat room in this thread here: [SOLVED] How to add html to screen