基于koa实现的即时通讯(koa-websocket)

这是服务端代码

// 基于koa-websocket实现的即时通讯
// 把下面的这个几个模块安装一下
// 这只是功能模块完成，后期肯定要连接数据库保存数据
const Koa = require('koa')
// 路由
const route = require('koa-route')
// koa封装的websocket这是官网（很简单有时间去看一下https://www.npmjs.com/package/koa-websocket）
const websockify = require('koa-websocket')
const app = websockify(new Koa());
app.ws.use(function (ctx, next) {
    return next(ctx)
})
app.ws.use(route.all('/', function (ctx) {
    ctx.websocket.on('message', function (message) {
        // 返回给前端的数据
        ctx.websocket.send(message)
    })
}))
app.listen(3000)
// 会默认打开127.0.0.1:3000这个端口号

然后运行 node 文件名（一定要安装node）

下面的客户端(html)

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

<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
    <input type="text" id="pl" />
    <input type="button" value="发送" id="submit" />
    <input type="button" value="关闭" id="close" />
</body>
<script type="text/javascript">
  // 很重要 必须写，判断浏览器是否支持websocket
    var CreateWebSocket = (function () {
        return function (urlValue) {
            if (window.WebSocket) return new WebSocket(urlValue);
            if (window.MozWebSocket) return new MozWebSocket(urlValue);
            return false;
        }
    })()
   // 实例化websoscket websocket有两种协议ws(不加密)和wss(加密)
    var webSocket = CreateWebSocket("ws://127.0.0.1:3000");
    webSocket.onopen = function (evt) {
        // 一旦连接成功，就发送第一条数据
         webSocket.send("第一条数据")
    }
    webSocket.onmessage = function (evt) {
        // 这是服务端返回的数据
        console.log("服务端说" + evt.data)
    }
    // 关闭连接
    webSocket.onclose = function (evt) {
        console.log("Connection closed.")
    }
    // input事件发送数据
    document.getElementById("submit").onclick = function () {
        var str = document.getElementById("pl").value
        webSocket.send(str)
    }
</script>
</html>

这中间有参考这篇文章，可以去看一下传送门

基于koa实现的即时通讯(koa-websocket)

猜你喜欢