node.js+ws建立简单websocke通信
2017-10-21 本文已影响45人
山上的大王
在我们正式开始前，各位小伙伴请允许我先叨叨下。最近认为做一个神神叨叨的程序员要比高冷的程序员可爱一些，所以在抖腿背景音乐，我摇着头抖着腿敲下这篇文，说起来最近爱上抖腿电音是源于最近爱上B站鬼畜区了。好啦不废话啦，太叨叨也是惹人嫌的，毕竟我还是想做一个可爱的孩子。
因为我已经npm 好了express所以没有npm express的小伙伴们可以先
npm install express --save
若果你不想npm express 也可以，原生的node http 请求的服务端代码下面也会贴出，然后是
npm install ws --save
以下是express下的websocket
客户端代码（想要更清楚的了解websocket和其api的小伙伴们可以去看看阮一峰大神的websocket教程或者百度，相关教程代码很多的，因为我也是新手来着所以这里我就只实现了一些功能）
功能代码部分
<script>
var ws = new WebSocket('ws://localhost:3000');
// 新建一个WebSocket通信，连接一个端口号为3000的本地服务器
ws.onopen = function (e) { //连接建立时触发函数
console.log('Connection to server opened'+ws.readyState);
$('#show').html("连接状态："+ws.readyState+"</br>")
// 只读属性readyState表示连接状态
}
ws.onmessage=function (evt) { //客户端接收服务端数据时触发
$("#show").append(evt.data + "</br>");
//向页面追加显示服务端发送给客户端的消息
}
ws.onclose = function(evt) { //连接关闭时触发
console.log("WebSocketClosed!");
console.log(evt);
};
function sendMessage() { //向服务端发送消息
var msg=$('#message').val();
var s={msg:msg};
ws.send(JSON.stringify(s)); //传送字符串化的json对象
chang();
}
function chang() { //实属无聊改变输入框的内容
$('#message').val("");
}
function exit() {
ws.close(); //关闭ws通信
console.log("退出啦");
}
</script>
服务端代码(app.js)
var http = require('http');
var url=require('url');
var WebSocket=require('ws');
var server = http.createServer(app);
var wss=new WebSocket.Server({ server:server });
wss.broadcast=function broadcast() { //服务端广播消息
wss.clients.forEach(function each (client) {
if(client.readyState==WebSocket.OPEN){
client.send("开始通信吧！");
}
})
}
wss.on('connection',function connection(ws,req) {
var s;
ws.on('message',function incoming(message) {
console.log(message);
var smg = JSON.parse(message);
// 把传过来的字符串又json化了，别问我为什么这么无聊
console.log(smg.msg + " " + smg.name);
if(smg.msg!="") {
s = smg.name + "说：" + smg.msg;
ws.send(s);
}else {
ws.send("说些什么吧，别这么高冷呀")
}
});
wss.broadcast();
})
ok以后运行express启动文件就可以啦
下面是运行截图
服务端广播消息
客户端发送消息
控制台消息
到此一个简单express下的websocket通信就完成了
下面是原生部分
服务端代码
const http=require('http');
const url=require('url');
const fs=require('fs');
var WebSocket=require('ws');
var fun=function (request,response) {
var stream=fs.createReadStream('../views/ws.html',{flag:'r',encoding:'utf8'});
stream.pipe(response);
}
var server =http.createServer(fun).listen(8000);
var wss=new WebSocket.Server({ server:server });
wss.broadcast=function broadcast() {
wss.clients.forEach(function each (client) {
if(client.readyState==WebSocket.OPEN){
client.send("开始通信吧！");
}
})
}
wss.on('connection',function connection(ws,req) {
var s;
//const location = url.parse(req.url, true);
ws.on('message',function incoming(message) {
console.log(message);
var smg = JSON.parse(message);
console.log(smg.msg + " " + smg.name);
if(smg.msg!="") {
s = smg.name + "说：" + smg.msg;
ws.send(s);
}else {
ws.send("说些什么吧，别这么高冷呀")
}
});
wss.broadcast();
})
ws.html的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
</head>
<body>
<div id="show"></div>
<div >
<input id="message" type="text" style="width: 200px">
<button type="button" id="send"
onclick="sendMessage();">
Send!
</button>
<button type="button" id="send"
onclick="exit();">
exit
</button>
</div>
<script>
var ws = new WebSocket('ws://localhost:8000');
ws.onopen = function (e) {
console.log('Connection to server opened'+ws.readyState);
$('#show').html("连接状态："+ws.readyState+"</br>")
}
ws.onmessage=function (evt) {
$("#show").append(evt.data + "</br>");
}
ws.onclose = function(evt) {
console.log("WebSocketClosed!");
console.log(evt);
};
function sendMessage() {
var msg=$('#message').val();
var s={msg:msg,name:"山上的大王"};
ws.send(JSON.stringify(s));
chang();
}
function chang() {
$('#message').val("");
}
function exit() {
ws.close();
console.log("退出啦");
}
</script>
</body>
</html>
因为没有写静态资源请求部分的代码所以界面略丑，大家将就着看吧。
原生截图
