4、客户端给服务端发消息,服务端回复

小咪咪 2022-05-16 07:13 451阅读 0赞

70

app.js 服务端

  1. /**
  2. * 服务端
  3. */
  4. /**
  5. * 1 将nodejs-websock包引进来
  6. */
  7. var ws = require('nodejs-websocket');
  8. /**
  9. * 2 创建一个WebSocket服务,建立TCP连接,
  10. * conn就是连进来的连接
  11. * server 监听2333端口
  12. */
  13. var server = ws.createServer(function(conn){
  14. console.log('New connection'); // 表示新的连接进来了
  15. /**
  16. * conn绑一个text事件,并接受一个回调
  17. */
  18. conn.on('text', function(str){
  19. console.log(str);
  20. // 给客户端返回信息
  21. conn.sendText(str);
  22. });
  23. }).listen(2333);

index.html 客户端

  1. <!--
  2. 客户端
  3. -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10. <title>Document</title>
  11. </head>
  12. <body>
  13. <input type="text" id="text">
  14. <button id="btn" type="button">发送</button>
  15. <script>
  16. /**
  17. * 这里我们创建一个WebSocket,里面填上服务端连接及端口号
  18. * ws 表示它的协议
  19. *
  20. */
  21. var ws = new WebSocket('ws://localhost:2333');
  22. /**
  23. * 向服务端发送消息
  24. */
  25. ws.onopen = function(){
  26. document.getElementById('btn').onclick = function(){
  27. ws.send(document.getElementById('text').value);
  28. }
  29. }
  30. /**
  31. * 接受服务端信息
  32. */
  33. ws.onmessage = function(e){
  34. var p = document.createElement('p');
  35. p.innerHTML = e.data;
  36. document.body.appendChild(p);
  37. }
  38. </script>
  39. </body>
  40. </html>

点击【调试】,启动调试,打开页面

70 1

当我们关闭网页时会报错

70 2

为此我们添加一个error事件

  1. /**
  2. * 服务端
  3. */
  4. /**
  5. * 1 将nodejs-websock包引进来
  6. */
  7. var ws = require('nodejs-websocket');
  8. /**
  9. * 2 创建一个WebSocket服务,建立TCP连接,
  10. * conn就是连进来的连接
  11. * server 监听2333端口
  12. */
  13. var server = ws.createServer(function(conn){
  14. console.log('New connection'); // 表示新的连接进来了
  15. /**
  16. * conn绑一个text事件,并接受一个回调
  17. */
  18. conn.on('text', function(str){
  19. console.log(str);
  20. // 给客户端返回信息
  21. conn.sendText(str);
  22. });
  23. conn.on("error",function(err){
  24. console.log(err);
  25. });
  26. }).listen(2333);

发表评论

表情:
评论列表 (有 0 条评论,451人围观)

还没有评论,来说两句吧...

相关阅读