这是一个基于socket.io的简单网络聊天室。我想将其更改为简单的WebSocket,但我不知道该怎么做。 我该如何也适应RAW WebSocket而不是socket.io?非常感谢! 我的代码附在下面!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>Chat Room</title>
<link type="text/css" rel="stylesheet" href="css/chat.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</head>
<body>
<div class="login-wrap">
<div class="login-con">
<h3>Enter User</h3>
<input type="text" placeholder="Please enter your user name:" id="loginName">
<button class="login-btn">Login</button>
</div>
<!-- <div class="portnum">
<h3>Enter Port</h3>
<input type="text" placeholder="Please enter the portnum here:" id="portnum">
<button class="portnum-btn">Connect</button>
</div> -->
</div>
<div class="chat-wrap hide">
<h1>Chat Room</h1>
<div class="users-con">
<p><h4>Online Users:</h4></p>
</div>
<div class="chat-con clearfix"></div>
<div class="bottom">
<input type="text" id="content">
<button class="sendBtn">Send</button>
</div>
</div>
</body>
</html>
chat.js
$(function(){
var socket = io('ws://localhost:8081');
var uname = null;
var name = null;
//var pnum = null;
/*Login*/
$('.login-btn').click(function(){
uname = $.trim($('#loginName').val());
if(uname){
socket.emit('login',{username:uname})
}else{
alert('!Please enter a username!')
}
})
/*Send Button message*/
$('.sendBtn').click(function(){
sendMessage()
});
/*Login*/
socket.on('loginSuccess',function(data){
if(data.username === uname){
checkin(data)
}else{
alert('!Username unavalable, please try again!')
}
})
/*On Fail*/
socket.on('loginFail',function(){
alert('!Username duplicated!')
})
/*Notice*/
socket.on('add',function(data){
name = data.username;
var html = '<p>'+name+' have entered the group chat.</p>';
var users_con = '<p>'+name+'</p>';
$('.chat-con').append(html);
$('.users-con').append(users_con);
})
/*Recieve msg*/
socket.on('receiveMessage',function(data){
showMessage(data)
})
/*Hide the login screen*/
function checkin(data){
$('.login-wrap').hide('slow');
$('.chat-wrap').show('slow');
}
/*Send msg*/
function sendMessage(){
var content = $('#content').val();
$('#content').val('');
if(content){
socket.emit('sendMessage',{username:uname,message:content});
}
}
/*Show msg*/
function showMessage(data){
var html
if(data.username === uname){
html = '<div class="chat-item item-right clearfix"><span class="message fr">'+data.username+": "+data.message+'</span></div>'
}else{
html='<div class="chat-item item-left clearfix rela"><span class="fl message">'+data.username+": "+data.message+'</span></div>'
}
$('.chat-con').append(html);
}
/*Leave*/
socket.on('leave',function(name){
if(name != null){
var html = '<p>'+name+' have left the group chat.</p>';
$('.chat-con').append(html);
}
})
})
app.js
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081;
/*Users*/
var users = [];
app.listen(PORT);
io.on('connection', function (socket) {
/*If it is duplicated*/
var isNewPerson = true;
/*Current user*/
var username = null;
/*Listen*/
socket.on('login',function(data){
for(var i=0;i<users.length;i++){
if(users[i].username === data.username){
isNewPerson = false;
break;
}else{
isNewPerson = true;
}
}
if(isNewPerson){
username = data.username;
users.push({
username:data.username
})
/*Login Success*/
socket.emit('loginSuccess',data);
/*Add*/
io.sockets.emit('add',data);
}else{
/*Login Fail*/
socket.emit('loginFail','');
}
})
/*listen*/
socket.on('sendMessage',function(data){
io.sockets.emit('receiveMessage',data);
})
/*disconnect*/
socket.on('disconnect',function(){
/*on leave*/
io.sockets.emit('leave',username);
users.map(function(val,index){
if(val.username === username){
users.splice(index,1);
}
})
})
})
console.log('app listen at:'+PORT);
什么是Socket.IO
Socket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信。它包括:
Node.js服务器:源| API 浏览器的Javascript客户端库(也可以从Node.js运行): API 其主要特点是:
可靠性
即使存在以下情况也会建立连接:
代理和负载平衡器。 个人防火墙和防病毒软件。 为此,它依赖于Engine.IO,该引擎首先建立长轮询连接,然后尝试升级到侧面经过“测试”的更好的传输,例如WebSocket。请参阅“目标”部分以获取更多信息。
自动重新连接支持
除非另有指示,否则断开连接的客户端将尝试永久重新连接,直到服务器再次可用为止。请在此处查看可用的重新连接选项。
断开连接检测
在Engine.IO级别上实现了心跳机制,使服务器和客户端都可以知道对方何时不再响应。
该功能是通过在服务器和客户端上设置计时器来实现的,并且在连接握手期间共享了超时值(pingInterval和pingTimeout参数)。这些计时器要求将任何后续客户端调用都定向到同一服务器,因此使用多个节点时需要执行粘性会话。