最近我遇到一个情况，有个需求前端需要写一个websocket，有个朋友说：“我没写过，你来写吧”
这么简单的websocket，就不要以没写过为借口了
下面我来写一个最简单的例子
0.先写一个简单服务端，这里只是为了启动一个websocket服务，实际中肯定不会让前端同学来写服务端的
const koa = require('koa2')
const webSocket = require('koa-websocket')
const app = webSocket(new koa())
app.listen(8080)
app.ws.use((ctx, next) => {
ctx.websocket.on('message', msg => {
ctx.websocket.send('收到你的消息:' + msg) // 收到的消息再发回去
})
ctx.websocket.on('close', msg => {
const index = ctxs.indexOf(ctx)
ctxs.splice(index, 1)
})
})
这样就用koa2启动了一个websocket服务，做的事也很简单，就是把收到的消息再发送给客户端
1.看看客户端怎么写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
</head>
<body>
<input type="text" id="msgInput" />
<button type="button" id="sendBtn">发送</button>
<script>
;(function() {
const ws = new WebSocket('ws:localhost:8080')
ws.addEventListener('open', () => {
console.log('open')
console.log('你发送消息：hello')
ws.send('hello')
})
ws.addEventListener('message', msg => {
console.log(msg.data)
})
ws.addEventListener('error', () => {
console.log('error')
})
ws.addEventListener('close', () => {
console.log('close')
})
const sendBtn = document.getElementById('sendBtn')
const msgInput = document.getElementById('msgInput')
sendBtn.addEventListener('click', function() {
console.log('你发送消息：' + msgInput.value)
ws.send(msgInput.value)
})
})()
</script>
</body>
</html>
首先，通过new WebSocket('ws:localhost:8080')连建立连接
const ws = new WebSocket('ws:localhost:8080')
接下来就是监听websocket的通信事件就行了
先监听连接成功的事件
ws.addEventListener('open', () => {
console.log('open')
console.log('你发送消息：hello')
ws.send('hello')
})
这里连接成功后，ws.send('hello')是向服务端发了一条消息，hello
监听message，就是收到服务端消息的事件
ws.addEventListener('message', msg => {
console.log(msg.data)
})
然后监听error和close，错误和关闭事件，实际中要做相应的处理
ws.addEventListener('error', () => {
console.log('error')
})
ws.addEventListener('close', () => {
console.log('close')
})
下面代码是，点击按钮时，我们把input里面的内容发送给服务端，用的也是ws.send方法
const sendBtn = document.getElementById('sendBtn')
const msgInput = document.getElementById('msgInput')
sendBtn.addEventListener('click', function() {
console.log('你发送消息：' + msgInput.value)
ws.send(msgInput.value)
})
这样一个最简单的websocket就完成了，其实没有任何难点，按照api调用就行了
网友评论