这是服务端代码
// 基于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>
这中间有参考这篇文章,可以去看一下传送门