使用socket.io实现简单聊天室案例


Posted in Javascript onJanuary 02, 2018

本文实例为大家分享了socket.io实现简单聊天室的具体代码,供大家参考,具体内容如下

1、客户端【index.html】代码:

<body>
  <h3>socket简例</h3>
  <hr>
  <div id = 'app'>
    <div>
      <div>
        <ul>
          <li v-for = 'item in msgs'>
            {{item.name}}说:{{item.content}}
          </li>
        </ul>
      </div>
      <div>
        <p><input type="text" v-model = 'msg'><button @click = 'm_send()'>发送</button></p>
      </div>
    </div>
  </div>

  <script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.9/vue.min.js'></script>
  <script type="text/javascript" src = 'https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js'></script>
  <script type="text/javascript">

    var _vm = new Vue({
      data : {
        name : '用户',
        msg : '',
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客户端发送消息
          socket_client.emit('say_client', {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = '' ;
        }
      }
    }).$mount('#app') ;


    // socket服务器
    var socket_client = io.connect('http://127.0.0.1:3000') ; 

    /**
     * 监听服务端发来的消息
     *
     * 1、“say_server”是客户端发出信息时的key值
     * 2、“res”是客户端传来的value值
     */ 
    socket_client.on('say_server' ,function(res){

      console.log('服务端发来的消息为:', res) ;

      _vm.msgs.push(res);
    });

  </script>
</body>

2、服务端【app.js】代码:

const http = require('http') ;
const server = http.createServer() ;

// web服务器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8888, function () {
  console.log('web服务器成功启动了,IP:127.0.0.1,端口号:8888') ;
});


// socket服务器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on('connection', function(client) {

// console.log(client) ;          // 查看连接进来的客户端对象内容  
// console.log(Object.keys(client)) ;    // 查看连接进来的客户端对象的关键key值

  /**
   * 监听客户端发来的消息
   *
   * 1、“say_client”是客户端发出信息时的key值
   * 2、“res”是客户端传来的value值
   */ 
  client.on('say_client', function(res) {
    console.log('客户端发来的消息为:', res) ;

    // 向客户端发送消息
    socket_server.emit('say_server', res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log('socket服务器成功启动了,IP:127.0.0.1,端口号:3000') ;  
}) ;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
react组件基本用法示例小结
Apr 27 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
You might like
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python画环形图的方法
2020/03/25 Python
python中format函数如何使用
2020/06/22 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
《散步》教学反思
2014/03/02 职场文书
法律顾问服务方案
2014/05/15 职场文书
英语感谢信范文
2015/01/20 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
导游词之桂林山水
2019/09/20 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android