index.html(客户端)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>Document</title>
8 <style>
9 div {
10 width: 200px;
11 height: 200px;
12 border: 1px solid #000;
13 }
14 </style>
15 </head>
16 <body>
17 <!-- 输入内容 -->
18 <input type="text" placeholder="输入你的内容" />
19 <!-- 发送请求 -->
20 <button>发送请求</button>
21 <!-- 显示结果 -->
22 <div></div>
23
24 <script>
25 var input = document.querySelector('input')
26 var button = document.querySelector('button')
27 var div = document.querySelector('div')
28 // 演示websocket在浏览器端如何使用
29 // H5已经直接提供了websocket的API，所以我们可以直接去使用
30
31 // 1. 创建websocket实例
32 // 参数1： websocket的服务地址
33 // 服务器使用node配合nodejs-websocket使用
34 var socket = new WebSocket('ws://localhost:3000')
35
36 // 2. open: 当和websocket服务连接成功的时候触发
37 socket.addEventListener('open', function() {
38 div.innerHTML = '连接服务成功了'
39 })
40
41 // 3. 主动的给websocket服务发送消息
42 button.addEventListener('click', function() {
43 var value = input.value
44 socket.send(value)
45 })
46
47 // 4. 接收websocket服务的数据
48 socket.addEventListener('message', function(e) {
49 console.log(e.data)
50 div.innerHTML = e.data
51 })
52
53 socket.addEventListener('close', function() {
54 div.innerHTML = '服务断开连接'
55 })
56 </script>
57 </body>
58 </html>
客户端(node)
首先
1 npm i nodejs-websocket
app.js
1 /*
2 开发websocket服务端程序
3 */
4 const ws = require('nodejs-websocket')
5 const PORT = 3000
6
7 // 创建了websocket服务
8 // 1. 能够给浏览器主动的发送数据
9 // 2. 能够接收到浏览器给我发送的数据
10 var server = ws.createServer(conn => {
11 console.log('接收到了新的连接')
12
13 // text事件当接收到了浏览器端的数据的时候，就会触发
14 conn.on('text', data => {
15 console.log(data)
16 // 如何给浏览器发送数据
17 conn.send(data.toUpperCase() + '!!!!')
18 })
19
20 conn.on('close', () => {
21 console.log('关闭了连接')
22 })
23
24 conn.on('error', () => {
25 console.log('连接异常')
26 })
27 })
28
29 server.listen(PORT, () => {
30 console.log('服务启动成功,监听的端口是' + PORT)
31 })
打开终端运行node app.js即可开启服务器测试webSocket
效果
进入页面
输入了文字点击发送请求
标签：websocket,log,WebSocket,HTML5,使用,var,console,div,socket From： https://www.cnblogs.com/jackal1234/p/17154588.html