express框架实现实时通信

最新推荐文章于 2024-09-13 08:04:03 发布

争取一行

最新推荐文章于 2024-09-13 08:04:03 发布

阅读量3.8k

点赞数

分类专栏： express ui框架 Node前端库框架工具等文章标签： nodejs socket js

本文链接：https://blog.csdn.net/qq_41956361/article/details/117795169

版权

express ui框架 Node前端库框架工具等专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们使用安装第三方包
cnpm install express-ws

对express框架熟悉的朋友一眼就能看透了

下面的是express注释

var express = require('express');
var app = express();
var expressWs = require('express-ws')(app);//引入express-ws
app.get('/', function(req, res, next){
  res.end();
});
 
app.ws('/', function(ws, req) {  //WebSocket接口我们设置为/
  ws.send("你连接成功了");
  ws.on('message', function(msg) {//监听发送过来的数据
    console.log(msg);
  });
  console.log('socket', req.testing);
});
 
app.listen(3000);

我们的html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9999999</title>
</head>

<body>
<input value="" id="input" />
<button onclick="getValue();">发送</button>
</body>
<script>
       var socket = new WebSocket("ws://localhost:3000/");
function getValue(){
	var value=document.getElementById("input").value;
                socket.send(value);
}
    socket.addEventListener("message", function (event) {//监听发送过来的数据
      console.log("Message from server", event.data);
    });
</script>
</html>