হার্ড কোড গল্ফ: একটি চ্যাটরুম তৈরি করুন

Question

কিউ স্টোরিলাইন: এটি একবিংশ শতাব্দীর শুরুর দিকে এবং বেশিরভাগ জিনিস অতীতের বিষয় হয়ে দাঁড়িয়েছে। আপনি এবং আপনার সহকর্মী কোড-গল্ফ-ইটারস, তবে, 1990 এর দশকে পুনরায় প্রতিক্রিয়া জানাতে চাইছেন। এই চ্যালেঞ্জের অংশ হিসাবে, আপনাকে অবশ্যই একটি সংক্ষিপ্ততর চ্যাটরুমটি তৈরি করতে হবে।

লক্ষ্য: যতটা সম্ভব কম বাইট সহ একটি চ্যাটরুম তৈরি করা। আপনি যে প্রোগ্রামটি লেখেন সেগুলি একটি সাধারণ সার্ভার হিসাবে কাজ করবে যা একটি ওয়েবপৃষ্ঠা পরিবেশন করে, যা ব্যবহারকারীদের স্ক্রিনে পাঠ্য পোস্ট করতে দেয়।

আসল লক্ষ্য: আসলে আপনার নিজের কম্পিউটার থেকে একটি ওয়ার্কিং চ্যাটরুম হোস্ট করার জন্য। আপনাকে এটি করতে হবে না, তবে এটি আরও মজাদার।

প্রয়োজনীয়তা:

• ব্যবহারকারীরা তাদের নিজের একটি ব্যবহারকারী নাম দিতে সক্ষম হবেন যা এই সেশনের জন্য স্থায়ী হয়
• ব্যবহারকারীদের বারবার পাঠ্য টাইপ করতে এবং জমা দিতে সক্ষম হওয়া উচিত যা অন্য ব্যবহারকারীর কাছে প্রদর্শিত হবে
• প্রতিটি ব্যবহারকারীর নাম ব্যবহারকারীর সাথে সমস্ত ব্যবহারকারীদের দ্বারা জমা দেওয়া পাঠ্যটি দেখতে সক্ষম হওয়া উচিত এবং তথ্যগুলি কালানুক্রমিকভাবে প্রদর্শন করা উচিত
• পৃষ্ঠাতে অনলাইনে লোকের সংখ্যা এবং তাদের ব্যবহারকারীর নামের তালিকাও প্রদর্শন করা উচিত
• আপনার চ্যাটরুমটি ইন্টারনেটে যে কারও কাছে অ্যাক্সেসযোগ্য হওয়া উচিত যারা কোথায় এটি সন্ধান করতে জানে (যেমন আইপি ঠিকানা জানা)।
• এটি আধুনিক ওয়েব ব্রাউজারগুলিতে কাজ করা উচিত।

অন্য সব আপনার উপর!

জমাগুলি:

• উত্স কোড, বা উত্স কোডের একটি লিঙ্ক অন্তর্ভুক্ত করা উচিত
• ক্রিয়ামূলক চ্যাটরুমের স্ক্রিনশট অন্তর্ভুক্ত করা উচিত
• আপনার লেখা সমস্ত প্রোগ্রাম / ফাইলগুলির মোট আকার, বাইটে অন্তর্ভুক্ত করা উচিত যা এটি কার্যকর করতে প্রয়োজনীয়।

এই চ্যালেঞ্জটি কিছুক্ষণের জন্য স্যান্ডবক্সে রয়েছে, সুতরাং আশা করি সমস্ত কিঙ্কস কাজ শেষ হয়েছে।

Comments

আমরা যদি চ্যাটটারদের তাদের প্রতিটি প্রতিক্রিয়া নয় সেকেন্ডের মধ্যে টাইপ করতে বাধ্য করি তবে কি এটি অনুমোদিত হবে?

— জন ডিভোরাক

আমার মনে হয় 9 সেকেন্ড সম্ভবত খুব ছোট। যদিও 99 সেকেন্ডের মতো কিছু সম্ভবত কাজ করতে পারে। আমি কখনও বকবকদের সময় সীমাবদ্ধতা রাখার কথা ভাবি নি।

— PhiNotPi

"অনলাইন" সংজ্ঞা দিন। আনলোড আনার আগে আমাদের কী আবার পোস্ট করতে হবে, 5 এর সময়সীমা যথেষ্ট হবে, না আমাদের এমনকি লোকেরা কখনও লগ-অফ না করে দাবি করার অনুমতি দেওয়া হয়?

— জন ডিভোরাক

আমাদের কি এইচটিএমএল-ইনজেকশন এবং অন্যান্য জিনিসগুলি অনুমতি দেওয়ার অনুমতি দেওয়া হয়েছে যা চ্যাটরুমটি ভেঙে দিতে পারে (যতক্ষণ না আমরা আমাদের নিজের কম্পিউটারকে আঘাত না করি)?

— জন ডিভোরাক

আসলে, আপনি কি "তাদের নয়টি সেকেন্ডের মধ্যে প্রতিটি প্রতিক্রিয়া টাইপ করতে পারেন?" "অনলাইন" দ্বারা আমার বোঝা যাচ্ছে এমন লোকদের একটি তালিকা যা বর্তমানে চ্যাটরুমটি দেখছে যেমন ব্রাউজার উইন্ডোতে চ্যাটরুমটি খোলা রয়েছে। একটি সময়সীমা ঠিক হবে।

— PhiNotPi

Answer 1

পিএইচপি + জিকুয়ারি + এইচটিএমএল + সিএসএস, 1535 বাইট

এটি ওপিকে 'আসল লক্ষ্য' বলে মনে করে তার প্রতি আরও ঝুঁকানো একটি জমা submission এটি হ'ল একটি সম্পূর্ণ কার্যকরী চ্যাট সার্ভার, যে কোনও জায়গায় যে কোনও ওয়েব সার্ভারে হোস্ট করা যেতে পারে।

কার্যকারিতা অন্তর্ভুক্ত:

• ব্যবহারকারীরা চ্যাট রুমে প্রবেশ বা ছেড়ে যাওয়ার সময় বিজ্ঞপ্তিগুলি।
• ব্যবহারকারীরা যখন তাদের উপনাম পরিবর্তন করেন তখন বিজ্ঞপ্তিগুলি।
• অতিরিক্ত সার্ভার ট্র্যাফিক, বা সার্ভার লোড তৈরি না করেই নতুন বার্তাগুলির জন্য রিয়েল টাইম পোলিং।
• লে-আউট এবং ব্যবহারযোগ্যতা এক্স চ্যাটের মতো বিদ্যমান চ্যাট ক্লায়েন্টগুলির সাথে দৃ strongly়তার সাথে সাদৃশ্যপূর্ণ।

অধিবেশন হওয়ার জন্য, উপযুক্ত বাক্সে একটি উপাধি লিখুন, এবং টিপুন Tabবা Enterজমা দিতে। যদি উপনামটি ইতিমধ্যে ব্যবহারে থাকে তবে আপনাকে অবহিত করা হবে। বার্তা প্রেরণের মাধ্যমেও সম্পন্ন হয় Enter।

আপনার সুবিধার জন্য, সমস্ত ফাইলের একটি সংরক্ষণাগার এখানে পাওয়া যাবে: chat.zip (ফাইল মেনু থেকে ডাউনলোড চয়ন করুন)। ইনস্টল করতে, পিএইচপি 5.4 বা ততোধিক চলমান সার্ভারে একটি ওয়েব ডিরেক্টরিতে আনপ্যাক করুন।

আদেশ সহকারে:

• ভোটদানের সময় IE 8 বা ততোধিকগুলি একটি অসীম লুপে স্পিন করবে কারণ কোনও কারণে মানবতার অজানা কারণে সমস্ত অ্যাজাক্স অনুরোধগুলি ডিফল্টরূপে ক্যাশে হয়। এটি আপনাকে একই বার্তা দুটি বার প্রেরণ, এবং সঠিকভাবে ব্যবহারকারীর তালিকা আপডেট করতে বাধা দেয়। cache:falseপ্রতিটি অ্যাজাক্স অনুরোধে যোগ করে এটি ঠিক করা যেতে পারে ।
• আইই এর সমস্ত সংস্করণে, এন্টার টিপে বার্তাগুলি প্রেরণ করা হবে না, কারণ changeইভেন্টটি ট্রিগার করা হয়নি (তবে ট্যাব টিপে টিপলে কাজ করে)। কোনও onkeypressহ্যান্ডলার যুক্ত করে কীটি এন্টার ছিল কিনা তা পরীক্ষা করে এবং তারপরে ফোন করে এটি ঠিক করা যেতে পারে $(v).blur().focus()।

সংক্ষেপে, IE সমর্থিত নয়।

---

মক্কেল

উপাদানগুলির অবস্থান নির্ধারণ করা কিছুটা দৃust় হতে পারে তবে এটি প্রায় 800x600 ডলার ন্যূনতম উইন্ডো আকারের সাথে ঠিকভাবে দেখা উচিত।

chat.htm (190 বাইট)

<script src=jquery.min.js></script>
<script src=c.js></script>
<link rel=stylesheet href=c.css>
<select id=u multiple></select><pre id=o></pre>
<input id=n onchange=u()><input id=v onchange=s()>

সি সি এস এস (১৩6 বাইট)

i{color:#999}
#u{float:right;height:100%;width:200px;margin-left:10px}
#o{border:1px solid #999;height:93%;overflow-y:scroll}
#v{width:54%}

সি.জেএস (৪৩৫ বাইট)

var l
(function p(){
  $.ajax({url:'p.php',data:{n:$('#n').val()},success:function(d){
    $('#o').html(d).scrollTop(1e4);$('#u').load('n.php');
  },complete:p,timeout:2e4})
})()
function s(){
  $.get('s.php',{n:$(n).val(),v:$(v).val()})
  $(v).val('')
}
function u(){
  $.get('u.php',{l:i=l,n:l=$(n).val()}).fail(function(){
    alert("This name is already in use!")
    $(n).val(l=i)
  })
}
$(window).on('unload',function(){$.ajax({url:'l.php',data:{l:l},async:false})})

---

সার্ভার

আমি এত ক্ষুদ্র অংশে সার্ভার ভেঙে যাওয়ার জন্য ক্ষমাপ্রার্থী। বিকল্পটি হ'ল পর্যাপ্ত বার্তা প্রোটোকল (জেএসওএন এনকোড / ডিকোডের মাধ্যমে) ব্যবহার করা বা if ... elseif ...পোস্ট ভেরিয়েবল উপস্থিত থাকার সাথে একটি বড় থাকার having পৃথক স্ক্রিপ্ট তৈরি করা, আপনার যা প্রয়োজন তা থেকে কেবলমাত্র অনুরোধ করা অনেক ছোট এবং সম্ভবত উভয়ের চেয়ে সহজ।

o.php (119 বাইটস) হে 'ডাটাবেসের' থেকে সংযোগ হিসেবে কলম

<?$m=array_slice(unserialize(file_get_contents(m)),-300);
$u=unserialize(file_get_contents(u));$t=time();extract($_GET);

c.php (57 বাইট) সি 'ডাটাবেস' এ পরিবর্তনগুলি বাদ দেয়

<?foreach([u,m]as$c)file_put_contents($c,serialize($$c));

নতুন বার্তাগুলির জন্য p.php (151 বাইট) পি ওল

<?for($t=time();@filemtime(m)<$t;usleep(1e3))clearstatcache();include('o.php');
foreach($m as$v)if($n&&$v[0]>=$u[$n])echo@date("[H:i]",$v[0])."$v[1]\n";

s.php (62 বাইট) এস সার্ভারে একটি বার্তা শেষ করে

<?include('o.php');$m[]=[$t,"<b>$n</b>: $v"];include('c.php');

u.php (222 বাইট) ইউ সারির রেজিস্ট্রেশন বা ওরফে পরিবর্তন

<?include('o.php');if(!trim($n)||$u[$n])exit(header('HTTP/1.1 418'));
$m[]=[$t,$u[$l]?
"<i><b>$l</b> is now known as <b>$n</b>.</i>":
"<i><b>$n</b> has entered the chat.</i>"];
$u[$n]=$u[$l]?:$t;unset($u[$l]);include('c.php');

n.php (65 বাইট) ব্যবহারকারীর তালিকা আহরণ এন সুপার কম্পিউটার

<?include('o.php');foreach($u as$k=>$v)echo"<option>$k</option>";

l.php (98 বাইট) ব্যবহারকারী l eft (তাদের ব্রাউজার বন্ধ) করেছেন

<?include('o.php');$m[]=[$t,"<i><b>$l</b> has left the chat.</i>"];
unset($u[$l]);include('c.php');

Comments

আমি মনে করি আপনি onchange=uপ্রথম বন্ধনী ছাড়াই করতে পারেন । তবে আপনি একটি সামঞ্জস্যপূর্ণ প্রসঙ্গ পাবেন না, তবে যাইহোক আপনার এটির দরকার নেই।

— জন ডিভোরাক

আপনি কি টিউটোরিয়ালটি আরও বিশদভাবে তৈরি করতে পারেন? আমি একটি ম্যাক এ সেট আপ করতে চান।

— হাইকমাম

@ পানুট আমি কয়েকটি নির্দেশ লিখেছি : codepad.org/UKGwb4g2 । আমি অন্ধ হয়ে কাজ করছি, তবে এটি সম্ভবত কাজ করবে।

— প্রিমো

Answer 2

পাইথন, 230

এটি মোটামুটি ন্যূনতম, তবে এটি অনুমান করা যায় না। যদি ব্যবহারকারীরা সর্বশেষ 99 সেকেন্ডে চ্যাট করেন তবে তারা "পৃষ্ঠাটি দেখছেন" হিসাবে গণ্য হবে।

import cherrypy as S,time
@S.quickstart
@S.expose
def _(n='',p='',l=["<form%sn value='%s'%sp%s'' type=submit>"],u={},t="><input name="):u[n]=time.time();l+=p and[n+':'+p];return'<br>'.join([k*(u[n]-99<u[k])for k in u]+l)%(t,n,t,t)

এটি পাইথনে আমার খুব প্রিয় কৌশলগুলির মধ্যে একটি ব্যবহার করে: ডিফল্ট মানগুলি আপনি যা যা করেছেন তার কেবলমাত্র রেফারেন্স mut এটি যদি কোনও পরিবর্তনীয় অবজেক্ট হয় তবে এটি কেবল যাত্রার জন্য আসে।

আরেকটি আমি প্রায়শই ব্যবহার করতে পারি না - তরকারী!

সার্ভার চালাচ্ছি:

পাইথন (উদাহরণস্বরূপ python chat.py) থেকে চ্যাট স্ক্রিপ্টটি চালান এবং তারপরেhttp://localhost:8080 এমন কিছু দেখতে আপনার ব্রাউজারটিকে নির্দেশ করুন

পাইথন, 442

এটি ব্যবহার করতে আসলেই দুর্দান্ত। এটি গল্ফ, সুতরাং আমি এটিকে একটি কম-সন্তোষজনক সমাধান হিসাবে বিবেচনা করি। এখন, আমি একটি আইফ্রেমে এবং কীন্ডলিং সহ একটি ফর্ম ... এবং নতুন সামগ্রীর জন্য জরিপে মেটা রিফ্রেশ করি abuse

import time,cherrypy as S
class C:
 c=S.expose(lambda s:"<form action=w target=t method=post><input name=n><input name=p onkeyup='if(event.keyCode==13){this.form.submit();this.value=\"\"}'><br><iframe name=t width=640>")
 @S.expose
 def w(s,n='',p='',l=[],u={}):u[n]=time.time();l+=p and[n+':'+p];return'<meta http-equiv=refresh content="1;url=w?n=%s">'%n+','.join(k for k in u if(u[n]-9<u[k])*k)+'<hr>'+'<br>'.join(l[::-1])
S.quickstart(C())

Comments

আমি সন্দেহ করি যে আমি আমার ব্রাউজারটি http://localhost:8080/c আপনার এইচটিটিপি সার্ভারে নির্দেশ করতে এবং অ্যাক্সেস করতে পারি

— জন ডিভোরাক

@ জনডভোরাক এই কারণেই আমি এটিকে কোনও লিঙ্ক তৈরি করিনি।

— বুথবি

যাদের ইতিমধ্যে বন্দরে চলছে কোনও পরিষেবা রয়েছে তাদের জন্য 8080আপনি পৃথক বন্দর ব্যবহার করতে নিম্নলিখিতগুলি শোধ করতে পারেন:S.config.update({'server.socket_port':8090})

— im ই

যখন কেবল নতুন ব্যবহারকারী নয়, কেউ নতুন বার্তা পাঠায় তখন চ্যাট উইন্ডোটি আপডেট করা কতটা কঠিন হবে ? (বর্তমান আকারে, কোনও নতুন বার্তা আছে কিনা তা পরীক্ষা করতে আপনার উইন্ডোটি আপডেট হওয়ার আগে আপনাকে একটি ফাঁকা বার্তা জমা দিতে হবে))

— প্রিমো

@ প্রিয়মো ঠিক! লোকেরা কিছু বলছে কিনা তা আপনি এটি পরীক্ষা করে দেখেন। সমস্যাটি 90 এর দশকে পুনরায় যোগাযোগ করতে বলেছে। এবং তারপরে, আপনার ব্যবহারকারীরা সহজ কোডের দ্বারা প্রস্তাবিত ইন্টারফেসটি গ্রহণ করার প্রত্যাশা করা এখনও দুর্দান্ত ছিল। এইচপি আমাদের আরপিএন দিয়েছে, এবং আমরা এটি পছন্দ করেছি । ২০১২-এর মত ভাবনা আপনাকে 1280 টি চরিত্রের ফোটা দেয়।

— বুথবি

Answer 3

উল্কা: 575 টি অক্ষর

আমি এই এক সাথে খুব মজা ছিল! অ্যাপ্লিকেশনটি সরাসরি http://cgchat.meteor.com/ এ ।

chat.html: 171 টি অক্ষর

<body>{{>b}}</body><template name="b">{{#if l}}Online: {{#each u}}{{n}}, {{/each}}<hr>{{#each m}}{{n}}: {{t}}<p>{{/each}}<hr><input>{{else}}Name: <input>{{/if}}</template>

lib / chat.js: 45 টি অক্ষর

c=Meteor.Collection;u=new c('u');m=new c('m')

ক্লায়েন্ট / ক্লায়েন্ট.জেএস: 359 টি অক্ষর

j=$.now;s=Session;t=Template.b;t.events({'change input':function(){v=$('input').val();s.get('u')?(m.insert({n:s.get('u'),t:v}),u.update(u.findOne({n:s.get('u')})._id,{$set:{l:j()}})):(s.set('u',v),u.insert({n:v,l:j()}))}});t.l=function(){return !!s.get('u')};t.u=function(){return u.find({l:{$gt:(j()-20000)}}).fetch()};t.m=function(){return m.find().fetch()}

Comments

লিঙ্কটি এখন মারা গেছে।

— programmer5000

Answer 4

নোড / উল্কা জাভাস্ক্রিপ্ট + এইচটিএমএল + সিএসএস + ওয়েবসকেট: 1,105 বাইট

এখানে একটি নোড.জেএস / উল্কা ব্যবহার করছে । স্পষ্টতই জেএস, রিয়েলটাইম এবং ওয়েবসকেট ব্যবহার করে লেখা। উল্কার ডিফল্ট অন্তর্নির্মিত প্যাকেজগুলি ব্যবহার করে।

এটা অনেক ছোট হতে পারে। এছাড়াও এটি অন্তর্ভুক্ত মঙ্গো দ্বারা স্থির হয় (এটি ভাল জিনিস নয়)।

একটি কাজের স্ক্রিনশট:

মৃত্যুদন্ড কার্যকর করতে, উল্কা ইনস্টল করুন।

লিনাক্স:

curl https://install.meteor.com | /bin/sh`

উইন্ডোজ: win.meteor.com

আমার রেপো ক্লোন করুন এবং উল্কা চালান:

git clone http://github.com/bradgearon/meteor-chat
cd meteor-chat
meteor

আপনার ব্রাউজারটি লোকালহোস্টে নির্দেশ করুন: 3000

chat.js: 703 বাইট (ক্লায়েন্ট / সার্ভার):

l='subscribe',d=[],n='n',i='i',b='b',c='click #',r='return ',u='u',y=0
f=Function,m=Meteor,o=m.Collection,p=new o(b),t=new o(u)
w=f('t.remove({i:d.pop()})'),g=f('_(d.length).times(w)')
m.isClient&&(h=Template.h,e=h.events={},m[l](b),m[l](u),s=Session,
w=f(r+'s.get(i)'),h.p=f(r+'p.find()'),h.t=f(r+'t.find()'),a=f('a','a','y=$("#3").val(),s.set(i,1)'),
e[c+'2']=f('p.insert({c:(y||"?")+": "+$("#l").val()})'),
e[c + '4'] = f('w()||m.call("x",$("#3").val(),t._connection._lastSessionId,a)')
)||(
m.startup(f('t.remove({}),p.remove({}),m.setInterval(g,100)')),j=f('h=this.id;h&&d.push(h)'),
m.methods({x:f('k','d','s=m.default_server.sessions[d].socket,s.on("close",j),t.insert({n:k,i:s.id})')}))

chat.css: 132 বাইট

g{display:block;overflow-y:scroll;margin:10px;}
n{float:right;width:40%;min-height:100%;}
d{float:left;width:60%;min-height:100%;}

chat.html: 270 বাইট

<body>
    {{> h}}
</body>
<template name="h">
<d>
<g>{{#each p}}{{c}}<br />{{/each}}</g>
<input id=l>{{this.k}}</input>
<input type=submit id=2 />
</d>
<n>
<g>{{#each t}}{{n}}<br />{{/each}}</g>
<input id=3 />
<input type=submit id=4 />
</n>
</template>

Comments

কোডগল্ফ স্বাগতম! এই ফাইলটিতে chat.htmlকেবল 254 বাইট রয়েছে বলে মনে হচ্ছে। নোট করুন যে ব্রাউজারগুলি ভয়ঙ্করভাবে পিক নয় - আমি ট্যাগগুলি বন্ধ করতে বিরক্ত করি না, এবং আপনাকে অবশ্যই ট্যাগগুলির শেষে স্ল্যাশের প্রয়োজন নেই (যদি না নোডের প্রয়োজন হয় না)? এছাড়াও, আরও সাদা জায়গা মেরে ফেলুন! আমি জাভাস্ক্রিপ্টে একটি দম্পতি দেখতে পাচ্ছি, এবং এইচটিএমএল-তে অনেক বেশি।

— বুথবি