WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
Socket.readyState | 只读属性 readyState 表示连接状态,可以是以下值:
|
后端通过websocket-npm模块进行服务的支持
npm install ws ;
npm install websocket;
以下为代码实现(需优化)
html
<
div
id=
"text"
></
div
>
<
div
id=
"mine"
>
<
h4
>我的
</
h4
>
</
div
>
<
div
id=
"share"
>
<
h4
>你的
</
h4
>
</
div
>
<
div
id=
"close"
>
<
h4
>关闭
</
h4
>
</div>
script
// Optional. You will see this name in eg. 'ps' or 'top' command
process.
title
=
'node-chat';
// Port where we'll run the websocket server
var
webSocketsServerPort
=
3001;
// websocket and http servers
var
webSocketServer
=
require(
'websocket').
server;
var
http
=
require(
'http');
var
mysql
=
require (
"mysql")
var
mysql
=
require(
'mysql');
var
connections
=
mysql.
createConnection({
host :
'127.0.0.1',
user :
'root',
password :
'',
database :
'test'
});
connections.
connect();
let
data;
connections.
query(
'SELECT * from user',
function (
error,
results,
fields) {
if (
error)
throw
error;
data
=
results
});
var
fs
=
require(
'fs');
// 文件名 // 文件内容 // 配置 // 回调
fs.
writeFile(
'index.txt',
"454844544454654",
{
//flag: 'a' //追加
},
function(
err) {
if (
err) {
console.
log(
'出现错误!')
}
else{
console.
log(
'已输出至index.txt中')
fs.
stat(
'./index.txt',
function(
err,
data){
console.
log(
data.
size);
});
fs.
readFile(
'./index.txt',
'utf8',
function(
err,
data){
console.
log(
data);
});
}
})
/**
* Global variables
*/
// latest 100 messages
var
history
= [ ];
// list of currently connected clients (users)
var
clients
= [ ];
/**
* Helper function for escaping input strings
*/
function
htmlEntities(
str) {
return
String(
str).
replace(
/&/
g,
'&').
replace(
/>/
g,
'>').
replace(
/"/
g,
'"');
}
// Array with some colors
var
colors
= [
'red',
'green',
'blue',
'magentas',
'purples',
'plums',
'orange' ];
// ... in random order
colors.
sort(
function(
a,
b) {
return
Math.
random()
>
0.5; } );
/**
* HTTP server
*/
var
server
=
http.
createServer(
function(
request,
response) {
// Not important for us. We're writing WebSocket server, not HTTP server
});
server.
listen(
webSocketsServerPort,
function() {
console.
log((
new
Date())
+
" Server is listening on port "
+
webSocketsServerPort);
});
/**
* WebSocket server
*/
var
wsServer
=
new
webSocketServer({
// WebSocket server is tied to a HTTP server. WebSocket request is just
// an enhanced HTTP request. For more info http://tools.ietf.org/html/rfc6455#page-6
httpServer:
server
});
// This callback function is called every time someone
// tries to connect to the WebSocket server
wsServer.
on(
'request',
function(
request) {
console.
log((
new
Date())
+
' Connection from origin '
+
request.
origin
+
'.');
// accept connection - you should check 'request.origin' to make sure that
// client is connecting from your website
// (http://en.wikipedia.org/wiki/Same_origin_policy)
var
connection
=
request.
accept(
null,
request.
origin);
// we need to know client index to remove them on 'close' event
var
index
=
clients.
push(
connection)
-
1;
var
userName
=
false;
var
userColor
=
false;
console.
log((
new
Date())
+
' Connection accepted.');
// send back chat history
if (
history.
length
>
0) {
connection.
sendUTF(
JSON.
stringify( {
type:
'history',
data:
history} ));
}
// user sent some message
connection.
on(
'message',
function(
message) {
//接收到的数据
console.
log(
message)
if (
message.
type
===
'utf8') {
if (
message.
utf8Data
===
'') {
connection.
sendUTF(
JSON.
stringify(
data))
setInterval(
function(){
connections.
query(
'SELECT * from user',
function (
error,
results,
fields) {
if (
error)
throw
error;
connection.
sendUTF(
JSON.
stringify(
results))
});
},
5000)
}
else{
connection.
sendUTF(
"love you to ")
}
}
else{
connection.
sendUTF(
data)
}
// accept only text
// if (userName === false) { // first message sent by user is their name
// // remember user name
// userName = htmlEntities(message.utf8Data);
// // get random color and send it back to the user
// userColor = colors.shift();
// connection.sendUTF(JSON.stringify({ type:'color', data: userColor }));
// console.log((new Date()) + ' User is known as: ' + userName
// + ' with ' + userColor + ' color.');
// } else { // log and broadcast the message
// console.log((new Date()) + ' Received Message from '
// + userName + ': ' + message.utf8Data);
// // we want to keep history of all sent messages
// var obj = {
// time: (new Date()).getTime(),
// text: htmlEntities(message.utf8Data),
// author: userName,
// color: userColor
// };
// history.push(obj);
// history = history.slice(-100);
// // broadcast message to all connected clients
// var json = JSON.stringify({ type:'message', data: obj });
// for (var i=0; i < clients.length; i++) {
// clients[i].sendUTF(json);
// }
// }
// }
});
// user disconnected
connection.
on(
'close',
function(
connection) {
console.
log(
"关闭了")
// if (userName !== false && userColor !== false) {
// console.log((new Date()) + " Peer "
// + connection.remoteAddress + " disconnected.");
// // remove user from the list of connected clients
// clients.splice(index, 1);
// // push back user's color to be reused by another user
// colors.push(userColor);
// }
});
});