Need A HTML ChatRoom, If Possible

I need a chatroom for my game

Example:

Like for the bottom left corner, please!

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 :smile:

1 Like

thaks so much

link:
https://fuzzy-quilt-atrociraptor.glitch.me/

1 Like

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 :slight_smile:

1 Like

I mean glitch.com sorry

OK, I will see about that too