世界上最伟大的投资就是投资自己的教育
Websocket 学习笔记系列文章教程之 实现简易聊天室 (四)
随风发布于6276 次阅读
1. 介绍
这篇文章介绍一下如何实现一个简易的聊天室。
2. 客户端
首先是界面。
新建一个 index.html 文件,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
<title>websocket chat</title>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="./main.js"></script>
</head>
<body>
<h1>websocket chat</h1>
<div>
<input id="name" size="15" type="text" value="NAME">
<input id="message" size="80" type="text" value="hello hello">
<input id="btn_post" type="button" value="post">
</div>
<ul id="chat"></ul>
</body>
</html>
新建 main.js 文件,内容如下:
var ws = new WebSocket("ws://localhost:8080");
ws.onmessage = function(e){
print(e.data);
};
ws.onopen = function(e){
log("websocket open");
console.log(e);
};
ws.onclose = function(e){
log("websocket close");
console.log(e);
};
$(function(){
$("#btn_post").click(post);
$("#message").keydown(function(e){
if(e.keyCode == 13) post();
});
});
var post = function(){
var name = $("#name").val();
var mes = $("#message").val();
ws.send(name+" : "+mes);
$("input#message").val("");
};
var log = function(msg){
console.log(msg);
$("#chat").prepend($("<li>").text("[log] "+msg));
};
var print = function(msg){
$("#chat").prepend($("<li>").text(msg));
};
post 函数中有一句ws.send(name+" : "+mes);
发送到服务器端,这个是发送聊天语句的。
3. 服务器端
现在添加服务器端代码。
新建 echo_server.rb 文件,内容如下:
#!/usr/bin/env ruby
require 'eventmachine'
require 'websocket-eventmachine-server'
PORT = (ARGV.shift || 8080).to_i
EM::run do
@channel = EM::Channel.new
puts "start websocket server - port:#{PORT}"
WebSocket::EventMachine::Server.start(:host : "0.0.0.0", :port : PORT) do |ws|
ws.onopen do
sid = @channel.subscribe do |mes|
ws.send mes
end
puts "<#{sid}> connect"
@channel.push "hello new client <#{sid}>"
ws.onmessage do |msg|
puts "<#{sid}> #{msg}"
@channel.push "<#{sid}> #{msg}"
end
ws.onclose do
puts "<#{sid}> disconnected"
@channel.unsubscribe sid
@channel.push "<#{sid}> disconnected"
end
end
end
end
浏览器和服务器端一直会维持链接,ws.send mes
表示发送信息给浏览器,只要浏览器与服务器端维持着链接,就会收到信息,相当于广播了。
运行服务器。
$ ruby echo_server.rb
接着打开两个浏览器,都分别运行 index.html 文件,就可以看到效果了。
本篇完结。
本站文章均为原创内容,如需转载请注明出处,谢谢。
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top
用户量大的时候这个能行吗,有啥好的方案?